Backoffice
Status
A state word on a tinted pill (Figma "Backoffice / Status" 2056:42010): Ok, Attention, Critical, Neutral, Info.
The dot is decorative; the word carries the meaning, so the tone is never colour alone. SM sits in table cells and lists, MD next to a page title.
<Status tone="attention">Em atraso</Status>Playground
Um preset por valor do primeiro eixo do Figma. Mude as props; dsState força hover, foco ou pressionado, como na matriz.
Backoffice / Status
Ativo
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).
Tone · Ok
| Size | Backoffice / Status |
|---|---|
| SM | Ativo |
| MD | Ativo |
Tone · Attention
| Size | Backoffice / Status |
|---|---|
| SM | Ativo |
| MD | Ativo |
Tone · Critical
| Size | Backoffice / Status |
|---|---|
| SM | Ativo |
| MD | Ativo |
Tone · Neutral
| Size | Backoffice / Status |
|---|---|
| SM | Ativo |
| MD | Ativo |
Tone · Info
| Size | Backoffice / Status |
|---|---|
| SM | Ativo |
| MD | Ativo |
Props
As props que o arquivo do DS declara. O componente também repassa as do primitivo (base-ui), quando ele tem um.
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
| tone? | "attention" | "critical" | "info" | "neutral" | "ok" | null | "neutral" | |
| size? | "md" | "sm" | null | "sm" | |
| className? | string | — | |
| children? | React.ReactNode | — |