Text
Markdown for agentsSemantic paragraph text with a controlled type scale; renders a real p (or span with inline).
npx slipstream-ui@latest add textxl semibold — lead paragraph
base — the default body paragraph, rendered as a real p element.
sm medium — emphasized supporting copy
xs muted — captions, footnotes, meta lines
lg — short marketing lines
Inline text flows with its neighbors — this fragment is a span inside the paragraph, not a block box.
Use inline for terms, tokens, and mid-sentence emphasis that must stay in flow.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| inline | boolean | false | Render as an inline span instead of a block p. |
| size | 'xs' | 'sm' | 'base' | 'lg' | 'xl' | 'base' | Type scale step. |
| weight | 'normal' | 'medium' | 'semibold' | 'bold' | — | Font weight. |
| muted | boolean | false | Use the muted-foreground token. |
Accessibility
- Renders real <p>/<span> — document semantics stay intact for reader modes and assistive tech.
- Muted tone uses --muted-foreground (AA in both themes).
- Never use Text where a Heading belongs — outline navigation depends on headings.
Browser support
| Browser | Tested versions |
|---|---|
| Chrome | 111+ (Mar 2023) |
| Edge | 111+ (Mar 2023) |
| Firefox | 121+ (Dec 2023) |
| Safari | 17.2+ — macOS & iOS (Dec 2023) |
Slipstream components rely only on CSS custom properties, Flexbox/Grid, and ARIA — the everyday baseline of the last two years of evergreen releases. Anything newer is progressive enhancement: unsupported browsers keep full functionality with static behavior instead of animations.