Badge
Badge de status com dot opcional. 5 variantes (Neutral, Brand, Success, Warning, Archived) e 2 tamanhos (default 12px/16px, large 14px/25px). Border-radius 5px.
Preview
Default (12px)
BadgeActiveMergedAtençãoArchived
Large (14px)BadgeActiveMergedAtençãoArchived
Código
Copie e cole no Claude Code para implementar este componente em pixel-perfect usando os tokens TRDR.
<!-- Neutral (default) -->
<span class="trdr-badge trdr-badge-neutral">Badge</span>
<!-- Brand com dot -->
<span class="trdr-badge trdr-badge-brand trdr-badge-dot">Active</span>
<!-- Success com dot -->
<span class="trdr-badge trdr-badge-success trdr-badge-dot">Merged</span>
<!-- Warning -->
<span class="trdr-badge trdr-badge-warning">Atenção</span>
<!-- Archived com dot -->
<span class="trdr-badge trdr-badge-archived trdr-badge-dot">Archived</span>
<!-- Large -->
<span class="trdr-badge trdr-badge-brand trdr-badge-lg trdr-badge-dot">Active</span>
<span class="trdr-badge trdr-badge-success trdr-badge-lg trdr-badge-dot">Merged</span>
<span class="trdr-badge trdr-badge-neutral trdr-badge-lg">Badge</span>Dimensões
| Variante | Largura | Altura |
|---|---|---|
| Default (sm) | auto (hug) | 16px |
| Large | auto (hug) | 25px |
| Dot icon | 6px | 6px |
Props / Variantes
| Prop | Tipo | Valores |
|---|---|---|
Variant | enum | NeutralBrandSuccessWarningArchived |
Size | enum | DefaultLarge |
Dot | boolean | truefalse |
Tokens Utilizados
| Propriedade | Token | Valor | |
|---|---|---|---|
| BG Neutral | surface-secondary | #222222 | |
| BG Brand | surface-brand | #00D4FF29 | |
| BG Success | surface-success | #4FE29014 | |
| BG Warning | surface-warning | #FFCC4014 | |
| BG Archived | surface-tertiary | #1A1A1A | |
| Text Neutral | content-tertiary | #A4A4A4 | |
| Text Brand | content-brand | #00D4FF | |
| Text Success | content-success | #4FE290 | |
| Text Warning | content-warning | #FFD35A | |
| Text Archived | content-disabled | #4A4A4A | |
| Border Neutral | border-subtle | #222222 | |
| Border Brand | content-brand | #00D4FF | |
| Border Success | content-success | #4FE290 | |
| Border Warning | content-warning | #FFD35A | |
| Border Archived | border-disabled | #777777 |
Anatomia
[span.trdr-badge .trdr-badge-{variant} .trdr-badge-lg? .trdr-badge-dot?]
└── [::before dot 6×6px border-radius full, cor = currentColor] (se .trdr-badge-dot)
└── [texto label]
Container: inline-flex, align-items center, border-radius 5px, border 1px solid
Default (sm): height 16px, padding 0 4px, Inter 12px/500, letter-spacing 0.2px
Large: height auto (~25px), padding 4px uniforme, Inter 14px/400, letter-spacing 0, line-height 1.2