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.

string

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

string

"start"

"center"

"end"

"stretch"

as

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

string

The name of a component.

"div"

function

() => {}

color

A color identifier to use for the text color.

string

A hex, name, or rgb value.

"brand"

object

An object with a color for dark and light modes.

{ dark: "string", light: "string" }

gridArea

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

string

"a parent grid area name"

margin

The amount of margin around the component.

string

"none"

"xxsmall"

"xsmall"

"small"

"medium"

"large"

"xlarge"

object

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).


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

size

The font size and line space height of the text.

string

"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

The name of a component.

"div"

function

() => {}

textAlign

How to align the text inside the component.

string

"start"

"center"

"end"

"justify"

tip

Tooltip or a hint when hovering over the text.

string

If the value is a string and no a11yTitle value is provided, tip value will be used for the a11yTitle default value.

"tooltip"

object


{
  content: node | string,
  dropProps: {},
  plain: boolean
}

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).

boolean

true

false

string

If truncate = tip, the full text content will be placed in a Tip that will appear on hover.

"tip"

weight

Font weight

string

"normal"

"bold"

number

wordBreak

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

string

"normal"

"break-all"

"keep-all"

"break-word"

React/DOM Properties

At its core, the Text component is a regular <span> element. Thus, both DOM and React properties, methods, and events are accessible. To read up on all of the possible DOM attributes and types available for span elements, check out this MDN Web Documents page. To learn more about DOM events and methods, you can read more on the MDN Web Events documentation page.

Also, feel free to read about the types of React events available, or see how DOM attributes change in React. Working in tandem with Styled Components, you also have access to the as property.

Theme

global.colors.text

The text color used for Text. In order for this to take effect, global.colors.background needs to be defined.

string

A hex, name, or rgb value.

"#444444"

object

An object with a color for dark and light modes.

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

text.font.family

The font family to use for Text.

string

"Segoe UI"

text

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

object


{
  xsmall: {
    size: '12px',
    height: '18px',
  },
  small: {
    size: '14px',
    height: '20px',
  },
  medium: {
    size: '18px',
    height: '24px',
  },
  large: {
    size: '22px',
    height: '28px',
  },
  xlarge: {
    size: '26px',
    height: '32px',
  },
  xxlarge: {
    size: '34px',
    height: '40px',
  },
}

text.extend

Any additional style for Text.

string

Any CSS.

css`color: 'blue'`

function

(props) => {}

global.edgeSize

The possible sizes for margin.

object


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