Chip
Etiqueta compacta com botão de remoção opcional, ícone e variantes de cor.
Demonstração
DefaultSecondarySuccessWarningDestructiveOutline
SmallMediumLarge
ReactTypeScriptCSS
Props
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
variant | 'default' | 'secondary' | 'success' | 'warning' | 'destructive' | 'outline' | 'default' | Variante visual |
size | 'sm' | 'md' | 'lg' | 'md' | Tamanho: sm | md | lg |
onRemove | () => void | — | Callback ao clicar no botão de remoção |
removeLabel | string | 'Remove' | Label acessível para o botão de remoção |
icon | React.ReactNode | — | Elemento ícone à esquerda |
disabled | boolean | false | Desabilita o chip |
Uso
import { Chip } from '@ghiberti85/ui'
// Basic
<Chip>React</Chip>
// Variants
<Chip variant="success">Active</Chip>
<Chip variant="destructive">Error</Chip>
<Chip variant="outline">Draft</Chip>
// Removable
const [tags, setTags] = useState(['React', 'TypeScript'])
{tags.map(tag => (
<Chip
key={tag}
variant="secondary"
onRemove={() => setTags(tags.filter(t => t !== tag))}
>
{tag}
</Chip>
))}
// Sizes
<Chip size="sm">Small</Chip>
<Chip size="md">Medium</Chip>
<Chip size="lg">Large</Chip>