Text

arbitrary text

simple text

Props

a11yTitle

Custom label to be used by screen readers. When provided, an aria-label will be added to the element.

"a user friendly label for screen readers"

alignSelf

How to align along the cross axis when contained in a Box or along the column axis when contained in a Grid.

"start"

"center"

"end"

"stretch"

as

The DOM tag or react component to use for the element.

"string""function""element"

color

A color identifier to use for the text color.

"status-critical"

gridArea

The name of the area to place this inside a parent Grid.

"a parent grid area name"

margin

The amount of margin around the component. An object can be specified to distinguish horizontal margin, vertical margin, and margin on a particular side.

"xsmall"

"small"

"medium"

"large"

"xlarge"

{
  "vertical": "...",
  "horizontal": "...",
  "top": "...",
  "bottom": "...",
  "left": "...",
  "right": "..."
}

size

The font size and line height are primarily driven by the chosen tag. But, it can be adjusted via this size property. The tag should be set for semantic correctness and accessibility. This size property allows for stylistic adjustments.

"xsmall""small""medium""large""xlarge""xxlarge""string"

tag

The DOM tag to use for the element. NOTE: This is deprecated in favor of indicating the DOM tag via the 'as' property.

"string""function"

textAlign

How to align the text inside the component.

"start""center""end"

truncate

Restrict the text to a single line and truncate with ellipsis if it is too long to all fit.

truefalse

weight

Font weight

"normal""bold"number

wordBreak

Whether words should break when reaching the end of a line.

"normal""break-all""keep-all""break-word"

Theme

global.colors.text

The text color used for Text.

{"dark": "#f8f8f8", "light": "#444444"}

text

The possible sizes of the text in terms of its font-size and line-height.

{
  "xsmall": {
    "size": "12px",
    "height": "18px",
    "maxWidth": "288px"
  },
  "small": {
    "size": "14px",
    "height": "20px",
    "maxWidth": "336px"
  },
  "medium": {
    "size": "18px",
    "height": "24px",
    "maxWidth": "432px"
  },
  "large": {
    "size": "22px",
    "height": "28px",
    "maxWidth": "528px"
  },
  "xlarge": {
    "size": "26px",
    "height": "32px",
    "maxWidth": "624px"
  },
  "xxlarge": {
    "size": "34px",
    "height": "40px",
    "maxWidth": "816px"
  }
}

text.extend

Any additional style for Text.

"any CSS"

(props) => {}

global.edgeSize

The possible sizes for margin.

{
  "none": "0px",
  "hair": "1px",
  "xxsmall": "3px",
  "xsmall": "6px",
  "small": "12px",
  "medium": "24px",
  "large": "48px",
  "xlarge": "96px",
  "responsiveBreakpoint": "small"
}