Text
Body copy with size and tone.
Usage
A polymorphic text primitive. Renders as <p> by default; swap the
element via the as prop without changing any styling.
Body copy, ready to go.
Sizes
Three sizes via the size prop, mapped to --sve-font-size-* tokens.
Large — size lg
Medium — size md (token default)
Small — size sm
Tones
Semantic color tokens via the color prop. Combine with weight for emphasis.
Primary bold
Success medium
Danger
Warning
Secondary
As element
Render as any semantic HTML element via the as prop. The component
carries the right styles regardless of the underlying tag.
npm install sve-ui Important notice.Props
Plus every native HTML attribute for the rendered element via prop spreading.
| Prop | Type | Default |
|---|---|---|
as HTML element to render. | 'p' | 'span' | 'div' | 'label' | 'strong' | 'em' | 'small' | 'li' | 'code' | 'blockquote' | … | 'p' |
size Text size. | 'sm' | 'md' | 'lg' | — |
weight Font weight. | 'normal' | 'medium' | 'bold' | — |
color | 'inherit' | 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'default' | 'inherit' |
align Text alignment. | 'left' | 'center' | 'right' | 'justify' | — |
truncate Truncate with ellipsis on overflow. | boolean | false |
class Extra classes merged onto the root. | string | — |
children Text content. | Snippet | — |