Text

Text renders body copy from the tokens only: size sets a --text-* step (font size and line height together), weight a --font-weight-* token, variant a semantic colour. Nothing hardcodes a pixel size, so a type-scale retheme moves every paragraph.

import Text from '@zuilib/components/text'

Sizes and weights

xs, sm, md and lg are the body range of the scale; md is --text-base.

Loading example

Variants

default is --foreground, muted is --muted-foreground. The status variants read --destructive-text, --success-text and --warning-text: the status colours made legible on --background. Every variant meets WCAG AA (4.5:1) on --background in both themes.

Loading example

Truncate and line clamp

truncate is a single line with an ellipsis; on an inline tag it adds inline-block max-w-full so there is a box to overflow. lineClamp clamps to that many lines and wins over truncate; the count goes through --text-line-clamp, so any positive integer works without a matching class.

Loading example

As a label

as="label" renders a bare <label> with the typography props and requires htmlFor, so it is always associated with a control. It does not join a Headless UI Field; for a form label that wires itself to the control (and carries required / dirty markers) use Label.

Loading example

Props

TextProps<TTag> extends the attributes of the rendered tag with:

Prop	Type	Default	Description
as	'p' | 'span' | 'div' | 'label'	'p'	label requires htmlFor; the ref is typed from as
size	'xs' | 'sm' | 'md' | 'lg'	'md'	--text-* step; md is --text-base
weight	'normal' | 'medium' | 'semibold' | 'bold'	'normal'	--font-weight-*
variant	'default' | 'muted' | 'destructive' | 'success' | 'warning'	'default'	Status variants use the --*-text tokens
truncate	boolean	false	Single line with ellipsis; ignored when lineClamp is set
lineClamp	number	—	Positive integer; other values are ignored
htmlForrequired	string	—	Only with as="label"; rejected on other tags
className	string	—	Merged last, after the size, weight and variant classes

Slots

Slot	Element	Notes
[data-slot="text"]	p (or as)	Root. Also data-size, data-weight, data-variant, data-truncate, data-line-clamp

/* Consumer CSS: italic muted copy */
[data-slot="text"][data-variant="muted"] {
  font-style: italic;
}

Tokens

Token	Used for
--text-xs, --text-sm, --text-base, --text-lg	Size and line height per size
--font-weight-normal/medium/semibold/bold	weight
--foreground, --muted-foreground	default and muted
--destructive-text, --success-text, --warning-text	Status variants, AA on --background

Accessibility

• Renders a plain semantic tag; no roles or aria are added.
• Every colour variant meets WCAG AA (4.5:1) on --background in both themes. The surface tokens (--success, --warning, --destructive) are never used as text colour, and there is no dimmer-than-muted variant because --muted-foreground sits at the AA floor on the light theme.
• as="label" requires htmlFor at the type level, so a label is always associated with its control.
• Truncated or clamped text is still fully present in the DOM for assistive tech; add a title or tooltip if sighted users need the full value.

Related

• Heading: the same scale for h1–h6.
• Label and Description: form text that joins a FormItem.
• Theming: the type scale and --*-text tokens.