Compact interactive element for tags, filters, and selections. Available in Soft and Solid styles, three sizes, rounded shape, selected and disabled states.
Loading demo: chip-real-world
npx sdaia-ui@latest add chip
import { Chip } from "@/components/ui/chip"<Chip style="soft" size="medium" />Chip in the default soft style.
Loading demo: chip-soft
Chip with a solid filled background.
Loading demo: chip-solid
Chip with fully rounded corners.
Loading demo: chip-rounded
Chip in the selected state.
Loading demo: chip-selected
Chip available in Large, Medium, and Small sizes.
Loading demo: chip-sizes
Chip in the disabled state, preventing interaction.
Loading demo: chip-disabled
Low-emphasis chip used for neutral tags and metadata.
Loading demo: chip-neutral
Outlined chip variant used for secondary filters and inactive selections.
Loading demo: chip-outline
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 | default SaudiAvatar from sdaia-assets | optional |
as | ElementType | 'button' | optional |
children | ReactNode | - | optional |
dir | "ltr" | "rtl" | — | optional |