Chip
Um componente interativo, compacto e estilizado, ideal para seleção, filtros ou categorização.
💰 Comercial
🌎 Financeiro
📊 Marketing
🛠️ Operações
🚀 Geral
Utilização
index.tsx
import { Chip } from "@convertcompany/ui";
Exemplos
Variantes
Default
Default
Default
Primary
Primary
Primary
Outline
Outline
Outline
Tamanhos
Com a prop size, você pode definir o tamanho do chip. Os tamanhos disponíveis são sm, md (padrão) e lg.
💰 Comercial
sm💰 Comercial
md (default)💰 Comercial
lgCores
Consulte abaixo as cores disponíveis para o componente. Você pode usar qualquer uma delas, basta passar o nome da cor como valor da propriedade color.
Alerta
Pendente
Confirmado
Novo
Rascunho
Com estado ativo
Com a prop data-state, você pode definir o estado do chip como ativo (on) ou inativo (off). Quando o estado é on, você pode exibir ou esconder um ícone de confirmação com a prop showCheckmark.
Selecionado
Selecionado
Removível
Este Chip 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.
💰 Comercial×
Tabela de cores
| Default | Outline | Ativo |
|---|---|---|
gray | gray | gray |
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 chip. | default primary outline |
| colorCor do chip. | gray red orange amber yellow lime green emerald teal cyan sky blue indigo violet purple pink fuchsia rose |
| sizeTamanho do chip. | sm md lg |
| data-stateIndica o estado visual do chip (ativo ou inativo). | on off |
| showCheckmarkExibe ícone de confirmação quando `data-state` for 'on'. | boolean |
| onRemoveCallback para exibir botão de remoção e executar função ao clicar. | (e: MouseEvent) => void |
| hoverAtiva efeitos visuais ao passar o mouse (padrão: true). | boolean |
| classNameClasse CSS adicional para estilização. | string |
| childrenConteúdo interno do chip. | ReactNode |
| ...propsDemais props do elemento div. | HTMLDivElement |