InlineStatus
Playground
Um preset por valor do primeiro eixo do Figma. Mude as props; dsState força hover, foco ou pressionado, como na matriz.
Inline Status
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 | Inline Status |
|---|---|
| sm | Marlene desconectada desde sábado, 21:40 |
| md | Marlene desconectada desde sábado, 21:40 |
Tone · Attention
| Size | Inline Status |
|---|---|
| sm | Marlene desconectada desde sábado, 21:40 |
| md | Marlene desconectada desde sábado, 21:40 |
Tone · Danger
| Size | Inline Status |
|---|---|
| sm | Marlene desconectada desde sábado, 21:40 |
| md | Marlene desconectada desde sábado, 21:40 |
Tone · Info
| Size | Inline Status |
|---|---|
| sm | Marlene desconectada desde sábado, 21:40 |
| md | Marlene desconectada desde sábado, 21:40 |
Tone · Neutral
| Size | Inline Status |
|---|---|
| sm | Marlene desconectada desde sábado, 21:40 |
| md | Marlene desconectada desde sábado, 21:40 |
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" | "danger" | "info" | "neutral" | "ok" | null | "neutral" | |
| size? | "md" | "sm" | null | "md" | |
| icon? | ReactNode | — | Replaces the tone's glyph (a lucide element). The tone still colours it. |
| className? | string | — | |
| children? | ReactNode | — |