Badge
@velon-finance/ui · status: stable · atom
Indicador de status pequeno. Sete variantes cobrem os estados semânticos usados em toda a plataforma.
Variantes
Default
Secondary
Pago
Pendente
Falhou
Info
Outline
Quando usar cada variante
- default / secondary. classificação neutra (uma tag, uma categoria)
- success. operação concluída com êxito (PIX confirmado, transferência liquidada)
- warning. atenção, mas não erro (KYC pendente, hold de 24h)
- danger. falha (charge falhou, transação rejeitada)
- info. destaque informativo (novo, beta, atualização)
- outline. quando precisa de menor peso visual
Código
import { Badge } from '@velon-finance/ui'
<Badge variant="success">Pago</Badge>