Chip
Compact label with optional remove button, icon, and color variants.
Live Demo
DefaultSecondarySuccessWarningDestructiveOutline
SmallMediumLarge
ReactTypeScriptCSS
Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'default' | 'secondary' | 'success' | 'warning' | 'destructive' | 'outline' | 'default' | Visual style variant |
size | 'sm' | 'md' | 'lg' | 'md' | Size: sm | md | lg |
onRemove | () => void | — | Callback when remove button is clicked |
removeLabel | string | 'Remove' | Accessible label for the remove button |
icon | React.ReactNode | — | Left icon element |
disabled | boolean | false | Disables the chip |
Usage
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>