Feedback
Badge
A short status word in a pill (Figma "Badge" 168:113).
Use it for a state that sits next to a name or a row: "Consentido", "Pausada", "Teste". It is not interactive and never the only place the state is said.
<Badge tone="ok" icon={<CircleCheck />}>Consentido</Badge>Playground
Um preset por valor do primeiro eixo do Figma. Mude as props; dsState força hover, foco ou pressionado, como na matriz.
Badge
Consentido
string
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 | Badge |
|---|---|
| Default | Consentido |
| Micro | Consentido |
| Large | Consentido |
Tone · Warm
| Size | Badge |
|---|---|
| Default | Consentido |
| Micro | Consentido |
| Large | Consentido |
Tone · Destructive
| Size | Badge |
|---|---|
| Default | Consentido |
| Micro | Consentido |
| Large | Consentido |
Tone · Muted
| Size | Badge |
|---|---|
| Default | Consentido |
| Micro | Consentido |
| Large | Consentido |
Tone · Soft
| Size | Badge |
|---|---|
| Default | Consentido |
| Micro | Consentido |
| Large | Consentido |
Tone · Ok
| Size | Badge |
|---|---|
| Default | Consentido |
| Micro | Consentido |
| Large | Consentido |
Tone · Attention
| Size | Badge |
|---|---|
| Default | Consentido |
| Micro | Consentido |
| Large | Consentido |
Tone · Info
| Size | Badge |
|---|---|
| Default | Consentido |
| Micro | Consentido |
| Large | Consentido |
Tone · Danger
| Size | Badge |
|---|---|
| Default | Consentido |
| Micro | Consentido |
| Large | Consentido |
Tone · Neutral
| Size | Badge |
|---|---|
| Default | Consentido |
| Micro | Consentido |
| Large | Consentido |
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" | "destructive" | "info" | "muted" | "neutral" | "ok" | "soft" | "warm" | null | "neutral" | |
| size? | "default" | "large" | "micro" | null | "default" | |
| icon? | ReactNode | — | The Figma "Icon" + "Icon glyph" pair: a lucide element before the label. Its colour follows the tone; size follows the badge size. |
| render? | ReactElement<unknown, string | React.JSXElementConstructor<any>> | — | Another element keeps the look (`<li />`, `<a />`). |
| className? | string | — | |
| children? | ReactNode | — |