Docs›Componentes (Admin)›mad-badge
Componentes (Admin)

mad-badge

Etiqueta compacta (variant + dot/icon).

Etiqueta compacta para status, contadores e rotulos. Conteudo via slot.

Props

Prop Tipo Default Descricao
variant string 'default' default, primary, secondary, success, warning, error, danger, info, outline
icon string null Icone Lucide a esquerda do texto
dot bool false Mostra um dot colorido no lugar do icone

CUIDADO — danger e error nao sao equivalentes neste componente:

  • O CSS so define .mad-badge-danger (fundo/borda/texto vermelhos). variant="error" nao tem classe CSS correspondente — o badge fica sem cor (so o .mad-badge base).
  • O mapa de cores do dot e o oposto: so tem entrada para error (e success/warning/info/primary/default) — danger nao esta mapeado e o dot cai no cinza default.

Na pratica: use sempre variant="danger" para o badge ficar vermelho — mas saiba que, se combinar com dot, o dot sai cinza (nao vermelho) ate esse gap ser corrigido no componente.

Variantes

<mad-badge variant="default">Default</mad-badge>
<mad-badge variant="primary">Primary</mad-badge>
<mad-badge variant="secondary">Secondary</mad-badge>
<mad-badge variant="success">Ativo</mad-badge>
<mad-badge variant="warning">Pendente</mad-badge>
<mad-badge variant="danger">Cancelado</mad-badge>
<mad-badge variant="info">Info</mad-badge>
<mad-badge variant="outline">Outline</mad-badge>

Com icone

<mad-badge variant="info" icon="info">Info</mad-badge>
<mad-badge variant="success" icon="check">Aprovado</mad-badge>
<mad-badge variant="danger" icon="x">Recusado</mad-badge>

Com dot (status indicator)

<mad-badge variant="success" dot="1">Online</mad-badge>
<mad-badge variant="warning" dot="1">Pendente</mad-badge>
<mad-badge variant="info" dot="1">Em andamento</mad-badge>

dot substitui o icon quando ambos sao informados. Evite dot com variant="danger" — pela ressalva acima, o dot sairia cinza em vez de vermelho.

Como contador

<mad-badge variant="primary">12</mad-badge>
<mad-badge variant="danger">99+</mad-badge>

Dentro de listas e cards

<div style="display:flex;align-items:center;gap:8px;">
    <span>Pedido #1042</span>
    <mad-badge variant="success" dot="1">Pago</mad-badge>
</div>

Em coluna de listagem

Para badges em <mad-grid>, NAO usar <mad-badge> no transform — usar o atributo badge da <mad-col> (ver a pagina de mad-grid):

<mad-col field="status" label="Status"
    badge="A:success:Ativo|I:danger:Inativo|P:warning:Pendente" />

NUNCA fazer

{{-- ERRADO: montar badge com HTML manual --}}
<span class="badge badge-success">Ativo</span>

{{-- CERTO --}}
<mad-badge variant="success">Ativo</mad-badge>

{{-- ERRADO: passar texto via prop --}}
<mad-badge variant="success" text="Ativo" />

{{-- CERTO: texto vai no slot --}}
<mad-badge variant="success">Ativo</mad-badge>

{{-- ERRADO: usar <mad-badge> dentro de transform de coluna do grid --}}
<mad-col field="status" transform="Cls::badge" html />

{{-- CERTO: usar atributo badge da coluna --}}
<mad-col field="status" badge="A:success:Ativo|I:danger:Inativo" />