Componente de emblema

Última atualização: Julho 13, 2026

Emblema Tailwind CSS somente CSS com variantes primária, secundária, sotaque, informação, sucesso, aviso e erro. Estilos suaves, de contorno e fantasma, tamanhos xs-lg. WCAG AA acessível, funciona com Django, HTMX, Laravel, React e qualquer pilha.

Os componentes do crachá são etiquetas pequenas e compactas usadas para destacar, categorizar ou exibir informações de status. Construídos com HTML semântico e CSS Tailwind, os emblemas suportam vários tamanhos, cores e estilos para integração flexível em tabelas, cartões, perfis de usuário e sistemas de notificação. Leves e acessíveis, os crachás melhoram a hierarquia de informações sem adicionar confusão visual.

Somente CSS, sem necessidade de JavaScript. WCAG AA acessível e independente de estrutura - funciona com Django, HTMX, Laravel, React e qualquer pilha.

Aula	Tipo	Descrição
badge	Base	Etiqueta embutida pequena
badge-outline	Estilo	Preenchimento transparente com borda colorida
badge-soft	Estilo	Fundo colorido silenciado
badge-ghost	Estilo	Fundo sutil sem borda
badge-dashed	Estilo	Estilo de borda tracejada
badge-pill	Estilo	Formato de comprimido totalmente arredondado
badge-rounded	Estilo	Arredondamento moderado
badge-circle	Estilo	Círculo de largura igual para caracteres únicos ou números
badge-square	Estilo	Quadrado sem arredondamento
badge-xs	Tamanho	Extra pequeno
badge-sm	Tamanho	Pequeno
badge-md	Tamanho	Médio (padrão)
badge-lg	Tamanho	Grande
badge-xl	Tamanho	Extra grande
badge-2xl	Tamanho	2× extra grande
badge-primary	Cor	Cor do tema principal
badge-secondary	Cor	Cor do tema secundário
badge-accent	Cor	Cor do tema de destaque
badge-neutral	Cor	Cor neutra do tema
badge-info	Cor	Cor semântica da informação
badge-success	Cor	Cor semântica de sucesso
badge-warning	Cor	Cor semântica de aviso
badge-error	Cor	Cor semântica do erro

Uso Básico

<span class="badge">Badge</span>

<span className="badge">Badge</span>

Ver código

Tamanhos de emblemas

<span class="badge badge-xs">Xsmall</span>
<span class="badge badge-sm">Small</span>
<span class="badge badge-md">Medium</span>
<span class="badge badge-lg">Large</span>
<span class="badge badge-xl">Xlarge</span>
<span class="badge badge-2xl">2XLarge</span>

Ver código

Cores do emblema

<span class="badge">Default</span>
<span class="badge badge-primary">Primary</span>
<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-accent">Accent</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-error">Error</span>
<span class="badge badge-neutral">Neutral</span>

Ver código

Estilos de emblema

Emblemas flexíveis

<span class="badge badge-soft">Default</span>
<span class="badge badge-soft badge-primary">Primary</span>
<span class="badge badge-soft badge-secondary">Secondary</span>
<span class="badge badge-soft badge-accent">Accent</span>
<span class="badge badge-soft badge-info">Info</span>
<span class="badge badge-soft badge-success">Success</span>
<span class="badge badge-soft badge-warning">Warning</span>
<span class="badge badge-soft badge-error">Error</span>
<span class="badge badge-soft badge-neutral">Neutral</span>

Ver código

Emblemas de contorno

<span class="badge badge-outline">Default</span>
<span class="badge badge-outline badge-primary">Primary</span>
<span class="badge badge-outline badge-secondary">Secondary</span>
<span class="badge badge-outline badge-accent">Accent</span>
<span class="badge badge-outline badge-info">Info</span>
<span class="badge badge-outline badge-success">Success</span>
<span class="badge badge-outline badge-warning">Warning</span>
<span class="badge badge-outline badge-error">Error</span>
<span class="badge badge-outline badge-neutral">Neutral</span>

Ver código

Emblemas tracejados

<span class="badge badge-dashed">Default</span>
<span class="badge badge-dashed badge-primary">Primary</span>
<span class="badge badge-dashed badge-secondary">Secondary</span>
<span class="badge badge-dashed badge-accent">Accent</span>
<span class="badge badge-dashed badge-info">Info</span>
<span class="badge badge-dashed badge-success">Success</span>
<span class="badge badge-dashed badge-warning">Warning</span>
<span class="badge badge-dashed badge-error">Error</span>
<span class="badge badge-dashed badge-neutral">Neutral</span>

Ver código

Emblemas Fantasma

<span class="badge badge-ghost">Ghost</span>

Ver código

Formas de emblema

Distintivo arredondado

<span class="badge badge-error badge-rounded">10</span>

Ver código

Distintivo de pílula

<span class="badge badge-warning badge-pill">Pill badge</span>

Ver código

Emblema Quadrado

<span class="badge badge-neutral badge-square">99+</span>

Ver código

Crachá Círculo

<span class="badge badge-success badge-circle">
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 12l5 5l10 -10" /></svg>
</span>

Ver código

Indicadores de emblema

Os crachás vazios são perfeitos para indicadores de status ou pontos de notificação.

<span class="badge badge-primary badge-circle badge-lg"></span>
<span class="badge badge-primary badge-lg"></span>
<span class="badge badge-primary badge-md"></span>
<span class="badge badge-primary badge-sm"></span>
<span class="badge badge-primary badge-xs"></span>

Ver código

Composição do emblema

Integre emblemas com ícones ou aninhe-os dentro de outros componentes, como botões.

Distintivo com ícone

<span class="badge badge-info">
  <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
    <circle cx="12" cy="12" r="10"></circle>
    <path d="M12 16v-4"></path>
    <path d="M12 8h.01"></path>
  </svg>
  Info
</span>
<span class="badge badge-success">
  <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
    <circle cx="12" cy="12" r="10"></circle>
    <path d="m9 12 2 2 4-4"></path>
  </svg>
  Success
</span>
<span class="badge badge-warning">
  <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
    <path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"></path>
    <path d="M12 9v4"></path>
    <path d="M12 17h.01"></path>
  </svg>
  Warning
</span>
<span class="badge badge-error">
  <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
    <circle cx="12" cy="12" r="10"></circle>
    <path d="m4.9 4.9 14.2 14.2"></path>
  </svg>
  Error
</span>

Ver código

Botão interno do crachá

<button class="btn btn-primary btn-sm btn-active">
  Message
  <span class="badge badge-primary badge-xs">+49</span>
</button>
<button class="btn btn-sm">
  Inbox
  <span class="badge badge-xs badge-primary">+27</span>
</button>

Ver código

Usando Claude Code, Cursor ou outro editor de IA?

Cherry MCP fornece ao seu editor de IA os nomes exatos das classes Distintivo e a estrutura sob demanda. Chega de aulas alucinadas.

Experimente o Cherry MCP

Componente de emblema

Uso Básico

Tamanhos de emblemas

Cores do emblema

Estilos de emblema

Emblemas flexíveis

Emblemas de contorno

Emblemas tracejados

Emblemas Fantasma

Formas de emblema

Distintivo arredondado

Distintivo de pílula

Emblema Quadrado

Crachá Círculo

Indicadores de emblema

Composição do emblema

Distintivo com ícone

Botão interno do crachá

Relacionado