Text
이 콘텐츠는 아직 번역되지 않았습니다.
Text in one of the type roles.
The frame above shows the real web components, in the mode this site is in.
The design preview shows it next to every other web component.
When to use it
Section titled “When to use it”- Pick a role with
variant, never a raw font size. A role sets size, weight, line height and letter spacing together. - Choose the element with
asfor the document outline (h1,h2,p), not for looks.
Example
Section titled “Example”import { Text } from "@acme/ui";
<Text variant="title" as="h2">Weekly report</Text><Text tone="secondary">Sent every Monday.</Text>Options
Section titled “Options”The web component’s props. The other platforms take the same options under their own naming conventions.
| Prop | Type | Notes |
|---|---|---|
variant |
"display" | "title" | "heading" | "body" | "body-strong" | "label" | "detail" | "footnote" |
Defaults to body. |
tone |
"primary" | "secondary" | "accent" | "danger" | "success" | "warning" | "inherit" |
Defaults to primary. inherit takes the color of the surrounding text. |
as |
ElementType |
The element to render. Defaults to p. |
className |
string |
Source
Section titled “Source”| Platform | File |
|---|---|
| Web (React) | packages/ui/src/Text.tsx |
| Desktop (GPUI) | crates/acme-ui/src/components.rs |
| React Native | packages/ui-native/src/Text.tsx |
| Compose Multiplatform | kotlin/ui/src/commonMain/kotlin/acme/ui/Text.kt |