How to build an accessible Text in React
Renders the chosen native element (p/span/div) without imposing roles; muted styling keeps contrast within AA so secondary text stays readable
When to use a Text
- 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 it
- Section or page titles — use Heading for the document outline
- Long-form authored/markdown content — use Prose
Accessibility
Role paragraph, verified at WCAG 2.2-AA.
Common mistakes
Avoid: <Text size="lg" weight="semibold"> used as a page title
Prefer: <Heading level={1}>
Visually-large Text has no heading semantics, so it is missing from the document outline
Example
<Text>Body copy reads at the base size.</Text>