Text

Usage

Size

There are five font sizes available, medium is the default.

Weight

There are five font weights available, regular is the default.

Color

You may apply alternative theme colors to the text, base is the default.

Leading

Tighten or loosen the leading of your content. This translates to line-height in CSS.

Inline

Render the Text as an "inline" element.

Overflow strategy

Use the overflowStrategy prop to manage how Text behaves with regard to overflow.

useOverflowStrategy(strategy, numberOfLines?) is the hook Text itself uses to turn overflowStrategy into CSS — reach for it directly when building a component with its own overflow handling. Pass numberOfLines for multi-line clamping (not available through Text's own prop):

const styles = useOverflowStrategy('truncate', 2); // clamp to 2 lines

<p css={styles}>{longText}</p>;

Emphasized

Emphasized renders italicised text — a semantic <strong> with only italic styling applied, for inline emphasis that shouldn't also carry Text's bold weight.

Setting defaults for a subtree

DefaultTextPropsProvider sets color/size/weight/leading defaults for every Text underneath it that doesn't specify its own — useful for a component that renders arbitrary Text children but wants them to default to a particular look (several Balance components, including Checkbox, Radio, Tooltip and Table, use this internally).

useDefaultTextProps is the hook Text itself calls to resolve its final color/size/weight/leading — reach for it directly when building your own text-like component that should participate in the same subtree defaults Text does, without rendering an actual Text.

useTextContext reads the props a rendered Text ancestor resolved to (not just the provider's defaults) — it returns undefined outside a Text. TextLink uses this to match its parent Text's size when deciding how large to render its external-link icon.