Text
Body text with variants, sizes, weights, and truncation.
import { Text } from "@ps1ui/core";Variants
body — default foreground
muted — secondary information
subtle — tertiary information
primary — brand green
accent — warm highlight
danger — destructive or error
<Text variant="body">body — default foreground</Text>
<Text variant="muted">muted — secondary information</Text>
<Text variant="subtle">subtle — tertiary information</Text>
<Text variant="primary">primary — brand green</Text>
<Text variant="accent">accent — warm highlight</Text>
<Text variant="danger">danger — destructive or error</Text>Sizes
size xl
size lg
size md
size sm
size xs
<Text size="xl">size xl</Text>
<Text size="lg">size lg</Text>
<Text size="md">size md</Text>
<Text size="sm">size sm</Text>
<Text size="xs">size xs</Text>Truncate
A single line that is far too long for its box gets an ellipsis.
<div style={{ maxWidth: "16rem" }}>
<Text truncate>
A single line that is far too long for its box gets an ellipsis.
</Text>
</div>Props
| Prop | Type | Default | Description |
|---|---|---|---|
as | "p" | "span" | "div" | "label" | "strong" | "em" | "small" | "p" | Element to render. |
variant | "body" | "muted" | "subtle" | "primary" | "accent" | "danger" | "body" | Color variant. |
size | "xs" | "sm" | "md" | "lg" | "xl" | "sm" | Font size on the type scale. |
weight | "regular" | "medium" | "semibold" | "bold" | — | Font weight. |
truncate | boolean | false | Truncate overflowing text with an ellipsis instead of wrapping. |
Also accepts the attributes of the element rendered via as (default: <p>); ref is not supported.