Text

On this page

Watch

UTC 12:04:31

Depth

4.2 m

Speed

6.2 kn

The primitives composed: every value a token's name, never a raw color or distance.

Code

import { Box } from "@bosunkit/components/box";
import { Stack } from "@bosunkit/components/stack";
import { Inline } from "@bosunkit/components/inline";
import { Text } from "@bosunkit/components/text";
import { Heading } from "@bosunkit/components/heading";
import type { ReactElement } from "react";

export const description: string =
  "The primitives composed: a stack of two cards, a heading and a reading, all from tokens.";

export default function Example(): ReactElement {
  return (
    <Stack space="md">
      <Heading level={2}>Watch</Heading>
      <Inline space="sm">
        <Text family="mono" size="sm" color="text-dim">UTC 12:04:31</Text>
      </Inline>
      <Inline space="md">
        <Box background="surface2" padding="md" radius="lg">
          <Stack space="xs">
            <Text size="sm" color="text-dim">Depth</Text>
            <Text size="lg">4.2 m</Text>
          </Stack>
        </Box>
        <Box background="surface2" padding="md" radius="lg">
          <Stack space="xs">
            <Text size="sm" color="text-dim">Speed</Text>
            <Text size="lg">6.2 kn</Text>
          </Stack>
        </Box>
      </Inline>
    </Stack>
  );
}

Text chooses a complete typography role: body, body-reading, label, caption or code. The role includes its font, size, weight and line height, independent of the parent text. Choose as for the HTML element and color for a semantic color token.

The size aliases select caption (sm), body (md) or reading body (lg). An explicit variant takes precedence. family="mono" selects the monospace family for any role; code uses it automatically.

Watch

UTC 12:04:31

Depth

4.2 m

Speed

6.2 kn

The primitives composed: a stack of two cards, a heading and a reading, all from tokens.

Code

import { Box } from "@bosunkit/components/box";
import { Stack } from "@bosunkit/components/stack";
import { Inline } from "@bosunkit/components/inline";
import { Text } from "@bosunkit/components/text";
import { Heading } from "@bosunkit/components/heading";
import type { ReactElement } from "react";

export const description: string =
  "The primitives composed: a stack of two cards, a heading and a reading, all from tokens.";

export default function Example(): ReactElement {
  return (
    <Stack space="md">
      <Heading level={2}>Watch</Heading>
      <Inline space="sm">
        <Text family="mono" size="sm" color="text-dim">UTC 12:04:31</Text>
      </Inline>
      <Inline space="md">
        <Box background="surface2" padding="md" radius="lg">
          <Stack space="xs">
            <Text size="sm" color="text-dim">Depth</Text>
            <Text size="lg">4.2 m</Text>
          </Stack>
        </Box>
        <Box background="surface2" padding="md" radius="lg">
          <Stack space="xs">
            <Text size="sm" color="text-dim">Speed</Text>
            <Text size="lg">6.2 kn</Text>
          </Stack>
        </Box>
      </Inline>
    </Stack>
  );
}

Select meaning and reading density

Use body-reading for sustained paragraphs, body for compact explanations, label for field names and caption for supporting context. Choose as independently: a label-looking span does not associate itself with an input, and a large paragraph does not become a document heading.

Long code belongs in a highlighted code block that preserves whitespace and scrolls horizontally. Inline code is for a short identifier or expression. Keep units and qualifiers with their values, and use Reading for live instrument values so source and integrity remain attached. Shared typography follows the presentation scope; page CSS should not enlarge a control label to match surrounding report prose.

Props

Prop	Type	Default	Description
childrenrequired	ReactNode	–	The text.
family	"body" \| "mono" \| undefined	"body"	The face: the body face or the mono face; body unless set.
size	TextSize \| undefined	"md"	Compatibility alias: sm is caption, md is body, lg is body-reading. Ignored when variant is set.
variant	TextRole \| undefined	–	The semantic type role, including its weight and line height; body unless size is set.
color	ColorToken \| undefined	–	The color, a semantic color token by name; the text token unless set.
as	PrimitiveElement \| undefined	"p"	The element to render; `p` unless set.
className	string \| undefined	–	Classes added to the element's own.
testId	string \| undefined	–	Becomes `data-testid` on the element.