Components

Text

Sets body text, labels, captions and figures in token typography.

Storybook: Storybook
Source: Source

The example below loads live from Storybook; open it in Storybook to use the controls.

Live example, StorybookOpen in Storybook

Sizes and weight

sm gives 12 px, md 14 px and lg 16 px. weight="medium" uses the label style of the same size. lg has the regular weight only; there is no 16 px label token.

lg, 16 px: sample textmd, 14 px: sample textsm, 12 px: sample textmd, medium weight: sample textsm, medium weight: sample text

import { Text } from '@bigbang/ui';

export default function Sizes() {
  return (
    <div className="flex flex-col gap-sm">
      <Text size="lg">lg, 16 px: sample text</Text>
      <Text size="md">md, 14 px: sample text</Text>
      <Text size="sm">sm, 12 px: sample text</Text>
      <Text size="md" weight="medium">md, medium weight: sample text</Text>
      <Text size="sm" weight="medium">sm, medium weight: sample text</Text>
    </div>
  );
}

Tones

Tone changes the colour only. Status tones (danger, success, warning, info) do not carry meaning alone; the text or an icon says it too.

default: sample textsubtle: sample textsubtlest: sample textdanger: sample textsuccess: sample textwarning: sample textinfo: sample text

import { Text } from '@bigbang/ui';

const tones = ['default', 'subtle', 'subtlest', 'danger', 'success', 'warning', 'info'] as const;

export default function Tones() {
  return (
    <div className="flex flex-col gap-xs">
      {tones.map((tone) => (
        <Text key={tone} tone={tone}>
          {tone}: sample text
        </Text>
      ))}
    </div>
  );
}

On a dark surface

The inverse tone is for text on a dark surface (surface-inverse).

Sample text on a dark surface

import { Text } from '@bigbang/ui';

export default function Inverse() {
  return (
    <div className="bg-surface-inverse px-lg py-md">
      <Text tone="inverse">Sample text on a dark surface</Text>
    </div>
  );
}

Truncation

truncate cuts the text with an ellipsis after one line (true) or after the given number of lines (2-6). Give the full text another way; the example uses title.

This text is only a sample and is long enough not to fit the box; the cut part stays in the title attribute.This text is only a sample and is long enough not to fit the box; the cut part stays in the title attribute.

import { Text } from '@bigbang/ui';

const long = 'This text is only a sample and is long enough not to fit the box; the cut part stays in the title attribute.';

export default function Truncate() {
  return (
    <div className="flex w-64 flex-col gap-md">
      <Text truncate title={long}>
        {long}
      </Text>
      <Text truncate={2} title={long}>
        {long}
      </Text>
    </div>
  );
}

Tabular figures

numeric draws digits at equal width; they line up in columns and do not shift while a value changes.

Without numeric11:1188:88

numeric11:1188:88

import { Text } from '@bigbang/ui';

export default function Numeric() {
  return (
    <div className="flex gap-3xl">
      <div className="flex flex-col gap-xs">
        <Text size="sm" tone="subtle">Without numeric</Text>
        <Text>11:11</Text>
        <Text>88:88</Text>
      </div>
      <div className="flex flex-col gap-xs">
        <Text size="sm" tone="subtle">numeric</Text>
        <Text numeric>11:11</Text>
        <Text numeric>88:88</Text>
      </div>
    </div>
  );
}

As an element

The default element is a <span>. Use render to draw <p>, <strong>, <label> or <time>.

Paragraph: sample text

Emphasis: sample text28 October 2026

import { Text } from '@bigbang/ui';

export default function AsElement() {
  return (
    <div className="flex flex-col gap-sm">
      <Text render={<p />}>Paragraph: sample text</Text>
      <Text render={<strong />} weight="medium">Emphasis: sample text</Text>
      <Text render={<time dateTime="2026-10-28" />} tone="subtle">28 October 2026</Text>
    </div>
  );
}

Light and dark mode

Colours come from text tokens; light and dark mode need no separate setting.

default: sample textsubtle: sample textsubtlest: sample textdanger: sample textsuccess: sample textwarning: sample textinfo: sample text

import { Text } from '@bigbang/ui';

const tones = ['default', 'subtle', 'subtlest', 'danger', 'success', 'warning', 'info'] as const;

export default function Tones() {
  return (
    <div className="flex flex-col gap-xs">
      {tones.map((tone) => (
        <Text key={tone} tone={tone}>
          {tone}: sample text
        </Text>
      ))}
    </div>
  );
}