Text

Typography with a variant, a weight, and a semantic color.

When to use

Use Text when you need typography with a variant, a weight, and a semantic color.

Import

TypeScript

import { Text } from '@gzodo/ui'

Text is the type ramp for product UI: body, heading, subtitle, caption, and link. Color maps to tokens. Use as to change the element without changing the look. For page titles in documentation, the same component is used.

Examples

Heading

Subtitle

Body copy for a paragraph of UI text.

Caption

Link

Variants

heading is 22px, subtitle 17px, body 14px, caption 13px. link underlines on hover.

Regular

Medium

Bold

Weight

regular is 400, medium is 500, bold is 700. Weight is independent of the variant.

Default

Primary

Secondary

Muted

Danger

Success

Warning

Color

Semantic colors read from tokens. muted is for secondary copy. danger, success, and warning match the control colors.

Rendered as h2

Underlined

Removed

Element and decoration

as sets the DOM element. textDecoration applies underline or line-through without a variant change.

This label is longer than the box and clips

Ellipsis

ellipsis clips a single line. Set a width, or the text has nothing to overflow.

On dark

On light

Contrast color

differenceColor picks black or white text for a background you pass in, so a label stays readable on a custom swatch.

Text

Property

Description

Type

Default

children

The text or inline nodes.

ReactNode

—

variant

Type size and line height.

'body' | 'heading' | 'caption' | 'subtitle' | 'link'

'body'

weight

Font weight.

'regular' | 'medium' | 'bold'

'regular'

color

Token color.

'default'

as

Element to render.

keyof JSX.IntrinsicElements

'p'

textAlign

Horizontal alignment.

'left' | 'center' | 'right'

—

textDecoration

Decoration, independent of variant.

'none' | 'underline' | 'line-through'

—

ellipsis

Single-line truncation. Needs a bounded width.

boolean

—

differenceColor

Background used to pick black or white text.

string

—

fullWidth

width: 100%.

boolean

—

Tooltip

Tag