Chip
Compact UI element used to display tags, labels, or filter options. Perfect for categorization, selection states, and interactive content organization.
Import
import { Chip } from "@sparrowengg/twigs-react";Usage
const ChipExample = () => {
return (
<div style={{ display: "flex", gap: "8px", flexWrap: "wrap" }}>
<Chip color="primary">Primary</Chip>
<Chip color="success">Success</Chip>
</div>
);
};You can customize the chip by adding icons, variant and color
Examples
Selectable Chip
Interactive chips that can be selected and maintain an active state.
Props
Chip
| Prop | Type | Default |
|---|---|---|
children? | ReactNode | - |
size? | '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'sm' |
color? | 'default' | 'primary' | 'secondary' | 'error' | 'warning' | 'success' | 'accent' | 'default' |
variant? | 'solid' | 'outline' | 'solid' |
rounded? | 'sm' | 'full' | 'sm' |
closable? | boolean | false |
onClose? | () => void | - |
leftElement? | ReactNode | - |
rightElement? | ReactNode | - |
selectable? | boolean | false |
active? | boolean | - |
defaultActive? | boolean | false |
onActiveStateChange? | (active: boolean) => void | - |
css? | object | - |