Text
Body text. Renders a span by default — change the element with as.
Default body textSmall muted captionSecondary toneSemiboldDanger toneSuccess tone
import { Text } from '@gg-software/ui';
<Text>Default body text</Text>
<Text size="sm" tone="muted">Small muted caption</Text>
<Text weight="semibold">Semibold</Text>
<Text as="p" align="center">Centered paragraph</Text>
<Text truncate style={{ maxWidth: 160 }}>Truncates with an ellipsis when too long</Text>Props
| Prop | Type | Default | Description |
|---|---|---|---|
children* | ReactNode | — | content rendered inside the component |
as | ElementType | — | element to render (default span) |
size | "sm" | "md" | "lg" | md | |
tone | "default" | "success" | "warning" | "primary" | "danger" | "muted" | "secondary" | default | |
weight | "regular" | "medium" | "semibold" | regular | |
truncate | boolean | false | single-line ellipsis truncation |
align | "left" | "right" | "center" | — | |
className | string | — | |
style | CSSProperties | — |
* required · generated from packages/ui/src/typography/Text/Text.tsx