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. For vertical margin to be applied, Text needs to be contained within a layout component (such as Box or a generic div) or behave as a div (by applying as="div" or a display style of inline-block).

"xsmall"

"small"

"medium"

"large"

"xlarge"

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

size

The font size and line space height of the text.

"xsmall""small""medium""large""xlarge""xxlarge""2xl""3xl""4xl""5xl""6xl""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. For truncate to be applied, Text needs to be contained within a layout component (such as Box or a generic div).

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. In order for this to take effect, global.colors.background needs to be defined.

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

text.font.family

The font family to use for Text.

string

text

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

{
  "font": {},
  "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"
  },
  "2xl": {
    "size": "34px",
    "height": "40px",
    "maxWidth": "816px"
  },
  "3xl": {
    "size": "42px",
    "height": "48px",
    "maxWidth": "1008px"
  },
  "4xl": {
    "size": "54px",
    "height": "60px",
    "maxWidth": "1296px"
  },
  "5xl": {
    "size": "70px",
    "height": "76px",
    "maxWidth": "1680px"
  },
  "6xl": {
    "size": "90px",
    "height": "96px",
    "maxWidth": "2160px"
  }
}

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"
}