Feedback
CountPill
A count over an icon or next to a label (Figma "Count Pill" 2056:43962): unread notices, people waiting.
It is hidden from assistive tech: the parent carries the number in its name ("Avisos, 3 novos"). Never count messages or conversations.
<CountPill tone="brand" count={3} />Playground
Um preset por valor do primeiro eixo do Figma. Mude as props; dsState força hover, foco ou pressionado, como na matriz.
Count Pill
number
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 · Brand
| Size | Count Pill |
|---|---|
| Dot | |
| sm | |
| md |
Tone · Attention
| Size | Count Pill |
|---|---|
| Dot | |
| sm | |
| md |
Tone · Danger
| Size | Count Pill |
|---|---|
| Dot | |
| sm | |
| md |
Tone · Neutral
| Size | Count Pill |
|---|---|
| Dot | |
| sm | |
| md |
Tone · Muted
| Size | Count Pill |
|---|---|
| Dot | |
| sm | |
| md |
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" | "brand" | "danger" | "muted" | "neutral" | null | "brand" | |
| size? | "dot" | "md" | "sm" | null | "sm" | |
| count? | number | 0 | How many. Ignored by the dot size. |
| max? | number | 9 | Above it the pill reads "<max>+". |
| className? | string | — |