Text
Body text with semantic element, size, weight, and tone controls.
Add it to your project
Eject the complete text group, then import from its generated local barrel. The copied source and CSS belong to your application.
bash
pnpm exec toucan eject textbash
npx toucan eject textapp.tsx
import { Text } from '@/components/toucan/text';Use when
Copy needs Toucan typography while retaining appropriate HTML semantics.
Avoid when
The text introduces a document section; use Heading.
Example
Large body text for emphasis.
Default body text for content paragraphs.
Small muted text for captions and metadata.
API reference
Generated from packages/react/src/components. Only Toucan-specific props are listed; forwarded native props remain available as noted for each export.
Text
Text
Props type: TextProps
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
align | "left" | "right" | "center" | undefined | No | Alignment within the component layout. |
as | "p" | "span" | "label" | "small" | "strong" | "em" | "div" | 'p' | No | The HTML element rendered by the component. |
mono | boolean | false | No | Use the monospace font family. |
muted | boolean | false | No | Use the muted text treatment. |
size | "xs" | "sm" | "lg" | "base" | 'base' | No | Visual size variant. |
variant | "default" | "muted" | "accent" | undefined | No | Semantic visual variant. |
weight | "regular" | "medium" | "semibold" | "bold" | undefined | No | Typography weight. |
Also accepts the native HTML element attributes that are not replaced by a Toucan prop.
Type exports
TextProps
Accessibility
- Choose the as element for meaning; visual size does not change semantics.
Token families
textbody