Text
Installation
pnpm add @corew500/uiUsage
import { Text } from "@corew500/ui/text"
<Text>Content</Text>Variants
textVariants
| Axis | Values | Default |
|---|---|---|
| variant | bodyLargebodyMediumbodySmalllabelMediumlabelSmallcaption | bodyMedium |
| intent | defaultmuteddestructiveinherit | default |
| align | leftcenterright | none |
CMS Integration
Loading...
API Reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| as | enum | span | The HTML element to render. - `span`: Inline text (default) - `p`: Paragraph blocks - `label`: Form labels - `small`: Fine print or legal text - `strong`: Text with strong importance - `em`: Emphasized text |
| variant | enum | "bodyMedium" | Typography variant determining size, weight, and line-height. - `bodyLarge`: Large body text for intro paragraphs (18px) - `bodyMedium`: Default body copy (16px) - `bodySmall`: Secondary text (14px) - `labelMedium`: Form labels, UI chrome (14px, medium weight) - `labelSmall`: Buttons, metadata (12px, medium weight) - `caption`: Footnotes, timestamps (12px, muted) |
| intent | enum | "default" | Color intent for the text. - `default`: Standard foreground color - `muted`: Subdued muted-foreground color - `destructive`: Destructive/error color |
| align | enum | — | Text alignment. - `left`: Left-aligned text - `center`: Center-aligned text - `right`: Right-aligned text |
Accessibility
Screen Readers
- Use `as="strong"` for text with strong importance (screen readers announce it)
- Use `as="em"` for emphasized text (screen readers may change intonation)
Additional
- - Renders semantic HTML elements based on the `as` prop
- Use `as="p"` for block-level text content
- Use `as="label"` with `htmlFor` for form field labels
Localization
Translatable Content
- - Pass pre-translated strings as children
- All text content should be resolved before rendering
Additional
- Component does not contain internal i18n logic