Text
Semantic text primitives for headings, product copy, and compact metadata.
Workspace updates
3 unread messages
raft-ui@0.0.1
import { Text } from "raft-ui";
<Text.Heading />
<Text.Sans />
<Text.Mono />Use Text for repeatable product typography. Use token pages when auditing the full type scale.
Heading level 5
Large body
Body text
Small supporting text
Caption text
meta
Default
Muted
Placeholder
Primary
Success
Danger
Use the render prop to preserve Text styling while choosing the element required by the surrounding document structure.
- Format
- Plain text
- Encoding
- UTF-8
Example document with a long descriptive name.txt24 KB
leveldefault: 11 | 2 | 3 | 4 | 5 | 6
Semantic heading level. Renders the matching h1–h6 element.
variant"default" | "primary" | "information" | "muted" | "placeholder" | "accent" | "success" | "warning" | "danger"
Optional semantic color. Leave unset for the strong heading default.
renderReactElement | (props) => ReactElement
Base UI render override for changing the underlying element.
...propsuseRender.ComponentProps<"h1">
Native heading attributes plus Base UI render composition props.
| Prop | Type | Default | Description |
|---|---|---|---|
level | 1 | 2 | 3 | 4 | 5 | 6 | 1 | Semantic heading level. Renders the matching h1–h6 element. |
variant | "default" | "primary" | "information" | "muted" | "placeholder" | "accent" | "success" | "warning" | "danger" | — | Optional semantic color. Leave unset for the strong heading default. |
render | ReactElement | (props) => ReactElement | — | Base UI render override for changing the underlying element. |
...props | useRender.ComponentProps<"h1"> | — | Native heading attributes plus Base UI render composition props. |
sizedefault: "body""large" | "body" | "small" | "caption"
Sans text size for product copy and supporting labels.
variant"default" | "primary" | "information" | "muted" | "placeholder" | "accent" | "success" | "warning" | "danger"
Optional semantic color. Leave unset to use the size recipe default.
renderReactElement | (props) => ReactElement
Base UI render override for changing the underlying element.
...propsuseRender.ComponentProps<"p">
Native paragraph attributes plus Base UI render composition props.
| Prop | Type | Default | Description |
|---|---|---|---|
size | "large" | "body" | "small" | "caption" | "body" | Sans text size for product copy and supporting labels. |
variant | "default" | "primary" | "information" | "muted" | "placeholder" | "accent" | "success" | "warning" | "danger" | — | Optional semantic color. Leave unset to use the size recipe default. |
render | ReactElement | (props) => ReactElement | — | Base UI render override for changing the underlying element. |
...props | useRender.ComponentProps<"p"> | — | Native paragraph attributes plus Base UI render composition props. |
sizedefault: "code""code" | "meta" | "eyebrow" | "tabular"
Mono text size for identifiers, metadata, and numeric text.
variant"default" | "primary" | "information" | "muted" | "placeholder" | "accent" | "success" | "warning" | "danger"
Optional semantic color. Leave unset to use the size recipe default.
renderReactElement | (props) => ReactElement
Base UI render override for changing the underlying element.
...propsuseRender.ComponentProps<"p">
Native paragraph attributes plus Base UI render composition props.
| Prop | Type | Default | Description |
|---|---|---|---|
size | "code" | "meta" | "eyebrow" | "tabular" | "code" | Mono text size for identifiers, metadata, and numeric text. |
variant | "default" | "primary" | "information" | "muted" | "placeholder" | "accent" | "success" | "warning" | "danger" | — | Optional semantic color. Leave unset to use the size recipe default. |
render | ReactElement | (props) => ReactElement | — | Base UI render override for changing the underlying element. |
...props | useRender.ComponentProps<"p"> | — | Native paragraph attributes plus Base UI render composition props. |