Backoffice
Chip
A short tinted tag with no dot (Figma "Backoffice / Chip" 2079:10352): a seat's kind and age band, a plan, a subscription state inside a table cell.
Same tones as Status; use Status when the word is a state the row is in, Chip when it labels a thing. Long text truncates.
<Chip tone="ok">Sogra · 70+</Chip>Playground
Um preset por valor do primeiro eixo do Figma. Mude as props; dsState força hover, foco ou pressionado, como na matriz.
Backoffice / Chip
Sogra · 70+
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 / Chip |
|---|---|
| SM | Sogra · 70+ |
| MD | Sogra · 70+ |
Tone · Attention
| Size | Backoffice / Chip |
|---|---|
| SM | Sogra · 70+ |
| MD | Sogra · 70+ |
Tone · Critical
| Size | Backoffice / Chip |
|---|---|
| SM | Sogra · 70+ |
| MD | Sogra · 70+ |
Tone · Neutral
| Size | Backoffice / Chip |
|---|---|
| SM | Sogra · 70+ |
| MD | Sogra · 70+ |
Tone · Info
| Size | Backoffice / Chip |
|---|---|
| SM | Sogra · 70+ |
| MD | Sogra · 70+ |
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 | — |