componentes / badge

Badge

Pequeno rótulo de status com cores semânticas e um ponto opcional.

Como usar

Use `status` para a cor semântica e `dot` para um indicador decorativo. Não é interativo. A cor não deve ser o único sinal, então o texto deve dizer o status. Para categorias ou filtros use `Tag`.

preview

AtivoAtençãoRecusado

Badge.tsx

import { Badge } from "vaiperui";
 
<Badge status="success" dot>Ativo</Badge>
<Badge status="warning">Atenção</Badge>

Status

preview

success

error

warning

info

neutral

pending

status.tsx

<Badge status="success">success</Badge>
<Badge status="error">error</Badge>
<Badge status="warning">warning</Badge>
<Badge status="info">info</Badge>
<Badge status="neutral">neutral</Badge>
<Badge status="pending">pending</Badge>

Com ponto

preview

success

error

warning

info

neutral

pending

ponto.tsx

<Badge status="success" dot>success</Badge>
<Badge status="error" dot>error</Badge>
<Badge status="warning" dot>warning</Badge>
<Badge status="info" dot>info</Badge>
<Badge status="neutral" dot>neutral</Badge>
<Badge status="pending" dot>pending</Badge>

Tamanhos

preview

tamanhos.tsx

<Badge size="sm">sm</Badge>
<Badge size="md">md</Badge>
<Badge size="lg">lg</Badge>

Cor personalizada

preview

Laranja

Violeta

cor-personalizada.tsx

<Badge customColor="#ff6600" />
<Badge customColor={{ light: "#a855f7", dark: "#fde047" }} />

Props

Prop	Valores	Padrão	Descrição
status	success \| error \| warning \| info \| neutral \| pending	neutral	Cor semântica
dot	boolean	false	Ponto decorativo antes do texto
size	sm \| md \| lg	md	Tamanho do elemento e do texto
radius	none \| sm \| md \| lg \| full	full	Arredondamento dos cantos
customColor	string \| { light, dark }	nenhum	Qualquer cor CSS (ou um par por tema) para o badge (substitui o status)
(nativas)	span	nenhum	Todas as props nativas do elemento, className, ref etc.