Text

View Source

Text is a primitive component that typography components build from.

Text weight: 300

Text weight: 600

Text weight: 900

Copy

Edit

render(
  <StackView spacing={1}>
    {[300, 600, 900].map((weight) => (
      <Text key={weight} weight={weight} mediaQueries={{ lg: { size: 2 } }}>
        Text weight: {weight}
      </Text>
    ))}
  </StackView>
)

render(
  <StackView spacing={1}>
    {[300, 600, 900].map((weight) => (
      <Text key={weight} weight={weight} mediaQueries={{ lg: { size: 2 } }}>
        Text weight: {weight}
      </Text>
    ))}
  </StackView>
)

Props

innerRefFunction | Object

Gain access to the internal ref

inlineboolean

If true, sets display: inline-block, otherwise it defaults to display: block

align'left' | 'center' | 'right'

Maps to CSS textAlign property

italicboolean

Sets fontStyle: italic

truncateboolean

Sets whiteSpace: nowrap, overflow: hidden, textOverflow: ellipsis

sizenumber | string

Maps to CSS fontSize property. Accepts an index to fontSizes theme when using a numeric value, sets a pixel value if a no theme value found.

underlinestring

Maps to CSS textDecoration property

weightnumber | string

Maps to CSS fontWeight property

wrapboolean

Sets whiteSpace: nowrap when false

Props

PreviousBox NextIcon