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.

Outros
Figma: 2316:8953

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

VarianteLarguraAltura
Default (sm)auto (hug)16px
Largeauto (hug)25px
Dot icon6px6px

Props / Variantes

PropTipoValores
Variantenum
NeutralBrandSuccessWarningArchived
Sizeenum
DefaultLarge
Dotboolean
truefalse

Tokens Utilizados

PropriedadeTokenValor
BG Neutralsurface-secondary
#222222
BG Brandsurface-brand
#00D4FF29
BG Successsurface-success
#4FE29014
BG Warningsurface-warning
#FFCC4014
BG Archivedsurface-tertiary
#1A1A1A
Text Neutralcontent-tertiary
#A4A4A4
Text Brandcontent-brand
#00D4FF
Text Successcontent-success
#4FE290
Text Warningcontent-warning
#FFD35A
Text Archivedcontent-disabled
#4A4A4A
Border Neutralborder-subtle
#222222
Border Brandcontent-brand
#00D4FF
Border Successcontent-success
#4FE290
Border Warningcontent-warning
#FFD35A
Border Archivedborder-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