Text
Carbon's Text component, re-implemented as a polymorphic typography primitive for body / label / helper copy. Headings live in ./heading.tsx; this primitive covers everything that isn't a heading.
Live playground
Edit the JSX below — preview updates instantly. Switch brand × tone in the toolbar to see the same component re-themed in place.
Edit JSX — preview updates livereact-live
import { Text } from "@avala/design"; <Text kind="body" size="md" color="primary">Text</Text>
All variants
The Storybook stories file rendered as an iframe — every variant, every size, every state, baselined for visual regression.
primitives-text--defaultOpen in Storybook →
When to use
- Any body, label, helper, eyebrow, or code copy that should obey the Avala type scale.
- Replace inline
<p className="text-sm text-muted-foreground">…</p>patterns. The kind/size/color triple keeps decisions reviewable. - Marketing eyebrows above a headline —
<Text kind="eyebrow" size="md">SECTION</Text>.
When not to use
- Headings → use `<Heading>` from patterns. It has Section-context-driven level resolution.
- Inline links inside prose → use `Link`. Text doesn't carry link affordances.
- Form labels associated with an input → use `FormLabel`. It binds
for/idautomatically.