Spirit UI

Text

Used to render text with defined typography styles.

import { Text } from "@spirit-ui/design-system/components";
 
export default function Component() {
  return <Text>Lorem ipsum dolor sit amet</Text>;
}

Variants

The variant prop can be used to change the visual appearence of the text element.

import { Box, Text } from "@spirit-ui/design-system/components";
 
export default function Component() {
  return (
    <Box display="grid" gap="x2">
      <Text variant="extraSmall">Extra Small</Text>
      <Text variant="small">Small</Text>
      <Text variant="base">Base</Text>
      <Text variant="medium">Medium</Text>
      <Text variant="large">Large</Text>
      <Text variant="extraLarge">Extra Large</Text>
    </Box>
  );
}

Colors

The color prop can be used to change the color of the text.

import { Text } from "@spirit-ui/design-system/components";
 
export default function Component() {
  return <Text color="blue700">Lorem ipsum dolor sit amet</Text>;
}

Polymorphic

The as prop can be used to override the underlying html element that is rendered to change it's semantic meaning.

import { Text } from "@spirit-ui/design-system/components";
 
export default function Component() {
  return <Text as="span">Semantically rendered as {"<span>"}</Text>;
}

Props

PropDefaultType