ABBA UIv0.1.0
Typography

Text

Body copy at a token-bound size and tone.

Server-renderable1 export

The default way to render prose. Size, weight, tone and line height all resolve to tokens, so a theme change moves the whole system at once.

Import

import { Text } from "@abbainitiative/ui";

Also available from the subpath entry @abbainitiative/ui/text.

This component has no state and no event handlers, so it renders inside a Server Component without a client boundary of your own.

Examples

Sizes and tones

Large body copy

Default body copy

Muted supporting text

Something went wrong

<Stack gap={2}>
  <Text size="lg">Large body copy</Text>
  <Text tone="muted">Muted supporting text</Text>
  <Text tone="danger" weight="medium">Something went wrong</Text>
</Stack>

Props

Text props. All native attributes of the underlying element are also accepted and forwarded.
PropTypeDefaultDescription
as"p" | "span" | "div" | "strong" | "em" | "small" | …"p"Element to render.
size"xs" | "sm" | "md" | "lg" | "xl""md"Type scale step.
weight"regular" | "medium" | "semibold" | "bold""regular"Font weight.
tone"default" | "muted" | "primary" | "accent" | "success" | "warning" | "danger""default"Semantic colour role.
leading"tight" | "snug" | "normal" | "relaxed""normal"Line height.
truncatebooleanfalseTruncate to a single line with an ellipsis.

Accessibility

  • Tone is colour alone. Where the colour carries the meaning, repeat it in words.
  • Truncated text is still fully available to screen readers; only the visual line is clipped.