Exibição

Badge

Rótulo visual para status, contagens e categorias.

Uso

Use o elemento <y-badge> no seu HTML:

html

<y-badge>Novo</y-badge><y-badge variant="secondary">Rascunho</y-badge><y-badge variant="outline">v1.0</y-badge><y-badge variant="destructive">Cancelado</y-badge><y-badge variant="success">Pago</y-badge><y-badge variant="warning">Pendente</y-badge>

Exemplos

Variantes

Propriedades

Propriedade	Tipo	Padrão	Descrição
`variant`	`"default" \| "secondary" \| "outline" \| "destructive" \| "success" \| "warning"`	`"default"`	Estilo visual

Importação

Importe todos os componentes ou apenas este:

typescript

// Importar tudoimport '@yampi/ui';// Importar apenas este componenteimport '@yampi/ui/dist/components/badge.js';

Acessibilidade

Suporta navegação por teclado
Utiliza atributos ARIA apropriados
focus-visible para indicação de foco