Capítulo 61 de 108

Badge

Core Idea

Rótulo compacto para exibir status, contagem ou categoria, com variantes visuais e suporte a ícone/spinner embutido.

Key Concepts

  • variant: "default" | "secondary" | "destructive" | "outline" | "ghost" | "link".
  • data-icon="inline-start" | "inline-end": posiciona ícone ou Spinner antes/depois do texto do badge.
  • render prop: permite renderizar o badge como outro elemento (ex. <a>), preservando o estilo visual.
  • Cores customizadas: via className direto (bg-blue-50 text-blue-700 dark:bg-blue-950 dark:text-blue-300), sem variante dedicada por cor.

Code Examples

<Badge variant="secondary">
  <BadgeCheck data-icon="inline-start" />
  Verified
</Badge>
<Badge variant="outline">
  Bookmark
  <BookmarkIcon data-icon="inline-end" />
</Badge>
  • O que demonstra: ícone à esquerda ou à direita do texto usando o atributo data-icon, sem props extras de posicionamento.
<Badge render={<a href="#link" />}>
  Open Link <ArrowUpRightIcon data-icon="inline-end" />
</Badge>
  • O que demonstra: badge clicável como link, via render, mantendo o mesmo visual do Badge padrão.
<Badge className="bg-blue-50 text-blue-700 dark:bg-blue-950 dark:text-blue-300">
  Blue
</Badge>
  • O que demonstra: cor customizada fora das variantes padrão, exigindo par claro/escuro explícito.

Reference Tables

Badge

PropTypeDefault
variant"default" | "secondary" | "destructive" | "outline" | "ghost" | "link""default"
classNamestring-

Anti-patterns

  • Definir cor só para light mode: sempre parear bg-* com dark:bg-* (e mesmo para texto) para não quebrar no dark mode.
  • Colocar Spinner sem data-icon: sem o atributo, o alinhamento/spacing do ícone dentro do badge não funciona corretamente.

Key Takeaways

  1. variant cobre estados semânticos comuns; cores arbitrárias exigem className manual com par light/dark.
  2. data-icon é o padrão consistente em todo o catálogo (Badge, Button, Spinner) para posicionar ícones inline.
  3. render transforma o Badge em link/outro elemento sem perder estilo — mesmo padrão de composição usado em Item e outros componentes Base UI.

Connects To

  • Spinner (ch059): combinação badge+spinner para indicar processamento em background.
  • Item (ch071): usa Badge dentro de ItemActions/ItemHeader como indicador secundário.
  • Avatar (ch063): AvatarBadge é um indicador visualmente parecido mas é componente próprio, não o Badge genérico.
AnteriorSkeletonPróximoEmpty