Text
Body text with size, weight, and muted variants
Category: display · WCAG 2.2-AA · typography, text, paragraph, body
Variants
- normal
- medium
- semibold
Sizes
- sm
- md
- lg
Props
| Prop | Type | Default | Description |
|---|---|---|---|
as | 'p' | 'span' | 'div' | p | `p` for a paragraph, `span` for inline text, `div` for a block that imposes no semantics of its own. |
size | 'sm' | 'md' | 'lg' | md | Visual size of the component (e.g. 'sm', 'md', 'lg'). |
weight | 'normal' | 'medium' | 'semibold' | normal | Font weight ('normal' | 'medium' | 'semibold'). |
muted | boolean | false | When true, renders in a muted/subtle color. `Text` has no `tone` prop: `tone` is the severity vocabulary (Status, Badge, Timeline, SideNav); text emphasis is `muted`. |
Design tokens
--cascivo-font-sans--cascivo-font-normal--cascivo-font-medium--cascivo-font-semibold--cascivo-leading-normal--cascivo-color-text--cascivo-color-text-subtle--cascivo-text-sm--cascivo-text-base--cascivo-text-lg
When to use
- Rendering body copy, paragraphs, and inline text in app UI
- Applying size/weight/muted treatment to secondary or emphasized text
- Inline emphasis inside flow content (as="span")
When not to use
- Section or page titles — use Heading for the document outline
- Long-form authored/markdown content — use Prose
How to build an accessible Text in React →
Examples
Default
<Text>Body copy reads at the base size.</Text>Muted helper
<Text size="sm" muted>Secondary information</Text>Inline span
Use as="span" inside other flow content
<Text as="span" weight="semibold">emphasis</Text>Icon beside text
Text renders a <p> by default, so a nested Text needs as="span" — a <p> inside a <p> is invalid HTML and the browser silently closes the outer one, breaking the layout.
<Text>
<CheckIcon aria-hidden />
<Text as="span" weight="semibold">Deployed</Text>
</Text>Related components
- Heading — Heading carries outline semantics; Text is plain body copy