Arrow System
Badge

Badge ​

Rótulo compacto pra status, categoria ou tag. A cor comunica intenção (sucesso, erro, aviso…), não decoração — consome o DNA dos Fundamentos (01 Cor · feedback, 02 Tipografia · label, 04 Forma · feedback).

Playground ​

Importação ​

ts
import { Badge } from '@arrow/components-vue'

Uso básico ​

O texto vem pela prop label ou pelo slot padrão.

RascunhoVia slot
vue
<Badge label="Rascunho" />
<Badge>Via slot</Badge>

Intenção · tone ​

Cada tone mapeia uma família semântica de feedback (estilo soft: superfície + texto + borda do mesmo papel).

NeutralAccentAprovadoPendenteRejeitadoPremium
vue
<Badge tone="neutral">Neutral</Badge>
<Badge tone="accent">Accent</Badge>
<Badge tone="success">Aprovado</Badge>
<Badge tone="warning">Pendente</Badge>
<Badge tone="error">Rejeitado</Badge>
<Badge tone="premium">Premium</Badge>

Estilo · variant ​

Dois estilos: soft (fundo preenchido -surface, sem borda, texto -content forte — padrão) e outline (contorno -border, sem fundo).

SoftOutlineSoftOutline
vue
<Badge variant="soft" tone="success">Soft</Badge>
<Badge variant="outline" tone="success">Outline</Badge>

Tamanho · size ​

SmallMedium
vue
<Badge size="sm" tone="success">Small</Badge>
<Badge size="md" tone="success">Medium</Badge>

Forma · shape ​

pill (status pill, padrão) ou tag (cantos feedback.sm de 4px — ideal pra status em tabela).

PillTag
vue
<Badge shape="pill" tone="accent">Pill</Badge>
<Badge shape="tag" tone="accent">Tag</Badge>

Com ícone · slot leading ​

Encaixe um Icon do Arrow antes do texto.

AprovadoErroAtenção
vue
<Badge tone="success">
  <template #leading><Icon name="alarm-check" /></template>
  Aprovado
</Badge>

Casos de uso ​

Status de processo ​

ConcluídoEm andamentoCanceladoRascunho
vue
<Badge tone="success">Concluído</Badge>
<Badge tone="warning">Em andamento</Badge>
<Badge tone="error">Cancelado</Badge>
<Badge tone="neutral">Rascunho</Badge>

Categorias / tags ​

LicitaçãoPregãoPremium
vue
<Badge tone="accent" shape="tag">Licitação</Badge>
<Badge tone="accent" shape="tag">Pregão</Badge>
<Badge tone="premium" shape="tag">Premium</Badge>

API ​

Props ​

PropTipoPadrãoDescrição
tone'neutral' | 'accent' | 'success' | 'warning' | 'error' | 'premium''neutral'Intenção semântica (decide a cor via token).
variant'soft' | 'outline''soft'soft (fundo preenchido, sem borda, texto forte) ou outline (contorno, sem fundo).
size'sm' | 'md''md'Tamanho (tipografia label.md 12px / label.lg 14px + padding).
shape'pill' | 'tag''pill'pill (status pill) ou tag (cantos feedback.sm).
labelstring—Texto do badge. Alternativa ao slot default.

Slots ​

NomeDescrição
defaultConteúdo do badge (tem prioridade sobre label).
leadingElemento antes do texto (ex.: <Icon> ou dot de status).

Acessibilidade ​

  • <span> inline de apresentação. Atributos extras (ex.: aria-label) caem no elemento.
  • Pra badges que comunicam status, a cor nunca é o único sinal — o texto (e/ou ícone) carrega o significado. Se o badge for só cor, adicione aria-label.
  • Tons usam o par *-surface + *-content, que passa contraste AA (inclusive warning/premium, que reprovariam saturados).

Migração do MeBadge

Este Badge substitui o antigo MeBadge. O que mudou — e por quê:

  • variant (9 cores: blue/brightblue/green/red/orange/gray/purple/mustard/darkcyan) → tone (6 semânticos). Cor é intenção, não decoração (Fund. 01). purple/darkcyan/brightblue não são famílias Arrow; mustard → warning, orange → premium/warning.
  • size="standard|small" (borda vs fill sólido) → prop variant (soft preenchido sem borda + outline contornado). soft é o padrão (fundo -surface + texto -content forte, passa AA); fill saturado saiu.
  • size agora é tamanho de verdade (sm/md) + nova prop shape (pill/tag).
  • icon (Material Icons) → slot #leading com o Icon do Arrow.
  • tooltip* e hide → removidos. Tooltip é composição com o componente Tooltip; ocultar é v-if do consumidor.
  • Contador de notificação (rosa feedback.badge) não é este componente — fica pra um futuro NotificationBadge/Counter.