Foundations
Text
Running text in a Figma text style.
A <p> unless render says otherwise.
<Text variant="body-sm" tone="muted">Leva menos de um minuto.</Text>Playground
Um preset por valor do primeiro eixo do Figma. Mude as props; dsState força hover, foco ou pressionado, como na matriz.
Text
Proteção ativa
Variantes, tamanhos e estados
Cada célula é o componente real, marcada com a variante do Figma que reproduz (passe o mouse pra ver o node).
Variant · body-lg
| Text |
|---|
Proteção ativa |
Variant · body
| Text |
|---|
Proteção ativa |
Variant · body-medium
| Text |
|---|
Proteção ativa |
Variant · body-sm
| Text |
|---|
Proteção ativa |
Variant · label
| Text |
|---|
Proteção ativa |
Variant · label-sm
| Text |
|---|
Proteção ativa |
Variant · label-sm-strong
| Text |
|---|
Proteção ativa |
Variant · label-xs
| Text |
|---|
Proteção ativa |
Variant · overline
| Text |
|---|
Proteção ativa |
Variant · caption
| Text |
|---|
Proteção ativa |
Variant · caption-medium
| Text |
|---|
Proteção ativa |
Variant · caption-strong
| Text |
|---|
Proteção ativa |
Variant · micro
| Text |
|---|
Proteção ativa |
Variant · micro-strong
| Text |
|---|
Proteção ativa |
Variant · mono-sm
| Text |
|---|
Proteção ativa |
Props
As props que o arquivo do DS declara. O componente também repassa as do primitivo (base-ui), quando ele tem um.
TextProps
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
| variant? | "body" | "body-lg" | "body-medium" | "body-panel" | "body-sm" | "caption" | "caption-medium" | "caption-strong" | "label" | "label-lg-strong" | "label-sm" | "label-sm-strong" | "label-xs" | "micro" | "micro-strong" | "mono-code" | "mono-sm" | "overline" | null | — | |
| tone? | "brand" | "default" | "inherit" | "muted" | "subtle" | null | — | |
| render? | ReactElement<unknown, string | React.JSXElementConstructor<any>> | — | Another element (`<span />`, `<label />`, `<Link />`) keeps the style. |
| className? | string | — |
HeadingProps
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
| level | 1 | 2 | 3 | 4 | 5 | 6 | — | Document outline level: the element is `<h{level}>`. The look follows the level unless `variant` is set, so outline and size stay independent. |
| variant? | "display-number" | "display-panel" | "display-panel-sm" | "display-stage" | "display-stage-phone" | "heading-1" | "heading-1-consent" | "heading-2" | "heading-2-consent" | "heading-3" | "heading-4" | "heading-card" | "heading-page-sans" | null | — | |
| tone? | "brand" | "default" | "inherit" | "muted" | "subtle" | null | — | |
| render? | ReactElement<unknown, string | React.JSXElementConstructor<any>> | — | |
| className? | string | — |