All components (204)

Text

Typography · Text · .amset-text

What it is and when to use it

All the running text of the application: size, weight, ink level, tone, alignment, uppercase, tabular numbers and truncation.

When to use it

Whenever there is text that is not a heading. A bare <p> inherits whatever falls to it and ends up deciding its own size.
ink="secondary" for descriptions and help; ink="support" for supporting material (counters, axis labels). All three levels pass 4.5:1.
numeric in a column of amounts or in a stopwatch: without fixed-width numbers, the figure jiggles as it changes.

When not to

For a heading, Title: besides looking different, it places the page in the outline used to navigate blind.
For the description or the error of a field, those of TextField: they are linked with aria-describedby, and Text does not do that.

Keyboard: it does not take part. It is not interactive.

Accessibility: it is born with margin: 0 on purpose — the spacing is set by Stack, not by the text. Truncating with truncate or lines hides the text from SIGHT, never from the reader: it stays whole in the DOM, so it is a good idea to pass the full text in title. Watch out for transform="uppercase" on acronyms: some readers spell them out.

Fine-tuning: --amset-text-family, --amset-text-size, --amset-text-weight, --amset-text-color, --amset-text-leading and --amset-text-spacing. Not to be confused with the SCALE, which is --amset-text-xs … --amset-text-4xl.

What it looks like

Normal text, the kind you read.

Secondary and small: a hint, a footnote.

Something to look at.

<Text>Normal text, the kind you read.</Text>
<Text ink="secondary" size="sm">Secondary and small: a hint, a footnote.</Text>
<Text weight="bold" tone="error">Something to look at.</Text>

Props

Import it with import { Text } from '@amset/ui'. Required props are marked.

Prop	Type	What it does
`children`required	`ReactNode`	—
`align`	`"center" \| "start" \| "end" \| "justify"`	—
`as`	`"dd" \| "div" \| "dt" \| "em" \| "figcaption" \| "li" \| "p" \| "small" \| "span" \| "strong"`	Which element is rendered. `p` by default; `span` for text inside a sentence.
`balance`	`boolean`	Distributes the lines so a single word is not left at the end. For headlines and short sentences; in a long paragraph the browser ignores it.
`className`	`string`	Merged with the library classes; it does not replace them.
`hiddenVisual`	`boolean`	For the screen reader only: removed from sight, not from the tree.
`id`	`string`	—
`ink`	`"secondary" \| "primary" \| "support"`	Neutral ink level. If `tone` is passed, the tone wins and this is ignored.
`italic`	`boolean`	—
`leading`	`"normal" \| "tight"`	Line height. `tight` for a two-line card title.
`lines`	`number`	Cuts to N lines. Takes precedence over `truncate`.
`mono`	`boolean`	Fixed-width font: a reference, an identifier, a license plate.
`nowrap`	`boolean`	Never breaks the line. For a date or an amount that must not be cut.
`numeric`	`boolean`	Fixed-width numbers. A column of amounts or a stopwatch does not dance when a digit changes.
`size`	`"sm" \| "md" \| "lg" \| "xs" \| "xl"`	Step of the scale: `md` is body text.
`spacing`	`"normal" \| "tight" \| "wide"`	Spacing between letters. `wide` is for a short label in capitals.
`strike`	`boolean`	Strikethrough: a previous price, a task already done.
`style`	`CSSProperties`	—
`title`	`string`	What is shown on mouse hover. It is the place for the full text when it is truncated.
`tone`	`"neutral" \| "accent" \| "secondary" \| "tertiary" \| "info" \| "success" \| "warning" \| "error"`	Color with meaning: `error` for what has failed, `success` for what went well.
`transform`	`"uppercase" \| "lowercase" \| "capitalize"`	Uppercase and the like. Beware of `uppercase` on acronyms and short words: some screen readers spell them out. The real text is still the one that is written, so in the DOM it reads well.
`truncate`	`boolean`	A single line, with an ellipsis. It trims the VIEW: the text stays whole in the DOM, so the screen reader reads it completely. If the text matters, pass the whole text in `title` so it shows on hover.
`underline`	`boolean`	—
`weight`	`"normal" \| "bold" \| "medium"`	—

It also accepts the attributes of the element it renders: className, style, data-*, aria-* and its events.

CSS variables

These CSS variables are how you adapt it. Declare them on the component's selector, not on :root: the stylesheet redeclares them in the rule itself, and a declaration on the same element always wins.

Variable	Default
`--amset-text-family`	`var(--amset-font)`
`--amset-text-size`	`var(--amset-text-base)`
`--amset-text-weight`	`var(--amset-weight-normal)`
`--amset-text-color`	`var(--amset-ink)`
`--amset-text-leading`	`var(--amset-line-normal)`
`--amset-text-spacing`	`normal`
`--amset-text-lines`	`2`

How to change it

.amset-text {
  --amset-text-family: ...;
  --amset-text-size: ...;
}

In the test bench

Every state and variant, to try one at a time, on its page at ui.amset.tech: