Text

This component is used to render text in a variety of styles based on Soundstripe theme tokens. A single variant is shorthand for a set of typography-specific tokens.

Props

styled-system other props

Usage

By default, the Text component renders at the md size. One can use the default Text settings for most text elements.

<Text>This is default medium text.</Text>

We do have multiple variants for other situations.

<>
  <Text size="xl3">Text XL3</Text>
  <Text size="xl2">Text XL2</Text>
  <Text size="xl">Text XL</Text>
  <Text size="lg">Text LG</Text>
  <Text size="md">Text MD</Text>
  <Text size="sm">Text SM</Text>
  <Text size="xs">Text XS</Text>
</>

Variant Settings