Badge
Um componente visual compacto e estilizado para categorizar ou rotular conteúdos.
3 usuários
online
10 problemas
5 falhas
Utilização
index.tsx
import { Badge } from "@convertcompany/ui";
Exemplos
Variantes
Default
Disponível
Filled
Importante
Outline
Erro
Cores
Consulte abaixo as cores disponíveis para o badge. Você pode usar qualquer uma delas, basta passar o nome da cor como valor da propriedade color.
Cor do tema
Alerta
Pendente
Confirmado
Novo
Rascunho
Com ícone
Você pode adicionar um ícone ao badge, basta passar o componente do ícone como filho do badge.
Concluído
Removível
Este badge pode ser removido ao clicar no botão de remoção. Você pode definir a função a ser executada ao clicar na propriedade onRemove.
Tag removível×
Sem destaque
Você pode desabilitar o efeito de destaque ao passar o mouse sobre o badge, definindo a propriedade hover como false.
online
Tabela de cores
| Default | Filled | Outline |
|---|---|---|
gray | gray | gray |
primary | primary | primary |
red | red | red |
orange | orange | orange |
amber | amber | amber |
yellow | yellow | yellow |
lime | lime | lime |
green | green | green |
emerald | emerald | emerald |
teal | teal | teal |
cyan | cyan | cyan |
sky | sky | sky |
blue | blue | blue |
indigo | indigo | indigo |
violet | violet | violet |
purple | purple | purple |
pink | pink | pink |
fuchsia | fuchsia | fuchsia |
rose | rose | rose |
Props
| Propriedade | Tipo |
|---|---|
| variantEstilo visual do badge. | default filled outline |
| colorCor do badge. | gray red orange amber yellow lime green emerald teal cyan sky blue indigo violet purple pink fuchsia rose |
| onRemoveCallback para exibir botão de remoção e executar função ao clicar. | (e: MouseEvent) => void |
| hoverHabilita efeitos visuais de hover (true por padrão). | boolean |
| classNameClasse CSS adicional para customização. | string |
| childrenConteúdo do badge. | ReactNode |
| ...propsDemais props nativas do elemento <div>. | HTMLDivElement |