Strong
A section header is body in the strong weight.
<Text as="h3" strong>Tokens</Text>Text
Applies the 11/12/15/24 type ladder to any text element, without hand-rolling font rules.
Preview
import { Stack } from '@usefragments/ui';
<Stack gap="sm">
<Text as="h1" type="display">Two findings block the merge</Text>
<Text as="h2" type="title">Pull request 412</Text>
<Text as="p">Two token files changed since the last approval.</Text>Usage
Use when
- Any text that should sit on the type scale
- Headings and paragraphs that need real tags
- Text that must truncate or clamp
Avoid when
- Rich or authored content (use Markdown)
- A block of code (use CodeBlock); an inline digest is type="code"
- Anything clickable (use Link or Button)
Implementation notes
- Pick the tag with as, the look with type — they are separate decisions
- Never skip heading levels to get a smaller heading
- A section header is body plus strong, never a bigger step
- Color is for hierarchy and state, not decoration
- Truncated text needs the full string in title or a tooltip
Installation
pnpm add @usefragments/uiImport styles once from @usefragments/ui/styles. See the installation guide for framework and theme setup.
Examples
Inks
The ink ladder, the accent's text ink and the state inks.
import { Stack } from '@usefragments/ui';
<Stack gap="xs">
<Text>Primary</Text>
<Text color="secondary">Secondary</Text>
<Text color="tertiary">Tertiary</Text>Section Label
The small heading over a list.
<Text as="p" type="section-label">On this page</Text>Code
A digest or a path on the body step in the mono face.
<Text type="code">c46ff42922e7c384</Text>Truncation
One line with an ellipsis, or a clamp at two.
<Text as="p" truncate title="fragments-sdk/a-repository-with-a-very-long-name">fragments-sdk/a-repository-with-a-very-long-name</Text>API reference
Prop | Type | Default | Description |
|---|---|---|---|
as | "div" | "abbr" | "address" | "blockquote" | "cite" | "code" | "del" | "em" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "ins" | "label" | "mark" | "p" | "small" | "span" | "strong" | "sub" | "sup" | "time" | undefineddivabbraddressblockquotecitecodedelemh1h2h3h4h5h6inslabelmarkpsmallspanstrongsubsuptime | span | HTML element to render |
childrenRequired | React.ReactNode | Not set | Text content |
color | TextColor | undefinedwarningdangeraccentsuccesssecondarytertiaryprimary | "primary" | Ink. accent is the accent's text ink for one word inside a line; success/warning/danger are for a run of text that carries a state on its own — prefer Badge or Alert when the state deserves a container. |
lineClamp | number | undefined | Not set | Number of lines before truncating |
strong | boolean | undefined | Not set | The strong weight on any role. A section's header is body in the strong weight, never a bigger step. |
tabularNums | boolean | undefined | Not set | Tabular figures, so digits align and an updating number does not jitter |
truncate | boolean | undefined | Not set | Truncate with ellipsis on overflow |
type | TextType | undefinedtitlebodycaptioncodecontroldisplaysection-label | body | The step on the type ladder; a step owns size, line height, weight and tracking. caption and control 11, body 12, code 12 mono, title 15 strong, display 24 strong, section-label 11 strong in tertiary ink. |
style | CSSProperties | undefined | Not set | — |
Accessibility
- as keeps the document outline intact for screen readers
- Clamped text still exposes its full content to assistive tech
Related components
Next steps
- Accessibility guidanceThe keyboard, focus and naming rules every component carries.
- Every componentThe catalog, grouped by what each component does.