Chip
Compact interactive element for tags, filters, and selections. Available in Soft and Solid styles, three sizes, rounded shape, selected and disabled states.
const [selected, setSelected] = useState(new Set(['Electronics', 'Laptops', 'SAR 500–2000', 'Apple'])); {FILTER_GROUPS.map(group => ( <div key={group.label}> <p className="mb-2 text-[11px] font-[600] tracking-[0.06em] ...">{group.label}</p>Installation
npx sdaia-ui@latest add chip
Usage
import { Chip } from "@/components/ui/chip"<Chip style="soft" size="medium" />Examples
Soft
Chip in the default soft style.
<Chip variant="soft">Filter</Chip>Solid
Chip with a solid filled background.
<Chip variant="solid">Filter</Chip>Rounded
Chip with fully rounded corners.
<div className="flex flex-wrap gap-2 items-center"> <Chip rounded>Pill</Chip> <Chip rounded={false}>Rounded</Chip></div>Selected
Chip in the selected state.
<Chip variant="soft" selected>Filter</Chip>Sizes
Chip available in Large, Medium, and Small sizes.
<div className="flex flex-wrap gap-2 items-center"> <Chip size="lg">Large</Chip> <Chip size="md">Medium</Chip> <Chip size="sm">Small</Chip></div>Disabled
Chip in the disabled state, preventing interaction.
<Chip variant="soft" disabled>Filter</Chip>Neutral
Low-emphasis chip used for neutral tags and metadata.
<Chip variant="neutral">Neutral</Chip>Outline
Outlined chip variant used for secondary filters and inactive selections.
<Chip variant="outline">Outline</Chip>API Reference
ChipProps
Props for the Chip component.
Prop | Type | Default | Required |
|---|---|---|---|
variant | 'soft' | 'solid' | 'neutral' | 'outline' | 'soft' | optional |
size | 'sm' | 'md' | 'lg' | 'md' | optional |
rounded | boolean | true | optional |
disabled | boolean | false | optional |
selected | boolean | false | optional |
leadingIcon | ReactNode | - | optional |
trailingIcon | ReactNode | - | optional |
onLeadingIconClick | (e: MouseEvent<HTMLSpanElement> | KeyboardEvent<HTMLSpanElement>) => void | - | optional |
onTrailingIconClick | (e: MouseEvent<HTMLSpanElement> | KeyboardEvent<HTMLSpanElement>) => void | - | optional |
trailingIconLabel | string | 'Remove' | optional |
leadingIconLabel | string | - | optional |
avatar | boolean | false | optional |
avatarSrc | string | '/images/avatar.webp' | optional |
as | ElementType | 'button' | optional |
children | ReactNode | - | optional |