Text

Text is a run of copy. It renders a p, or a span with inline. It has three variants and no margin. The layout owns the space around it.

import Text from "@haloid/azucar/ui/text";

Variants

All three are text-sm. body is fg-4. secondary is fg-2, for descriptions, empty states, and labels. strong is fg-4 at medium weight, for a value or a title inside a line.

<Text>Over a quarter of records don't match the last audit.</Text>

Inline

inline renders a span instead of a p. Use it for text inside a line: a value beside a label, a clause inside a heading, copy inside a flex row. A p cannot sit inside a heading or another paragraph; a span can. The block form adds text-pretty; the inline form does not.

Class merge order

className merges last, so a caller's line-height or size wins over the variant. The recipes are exported as classes for parts that cannot wrap a p or span, such as list items and table cells.

Use in north

The accuracy band description under the band title is secondary.