Data Display
Compact tag or pill element, closable and selectable.
Press the chip or its close button to see events fire.
11 options across 3 groups
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | Chip label content. |
avatar | ReactNode | — | Avatar rendered at the start of the chip. |
startContent | ReactNode | — | Content rendered before the label. |
endContent | ReactNode | — | Content rendered after the label, before the close button. |
closeIcon | ReactNode | — | Overrides the default × close icon. |
children
ReactNode
Default: —
Chip label content.
avatar
ReactNode
Default: —
Avatar rendered at the start of the chip.
startContent
ReactNode
Default: —
Content rendered before the label.
endContent
ReactNode
Default: —
Content rendered after the label, before the close button.
closeIcon
ReactNode
Default: —
Overrides the default × close icon.
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "solid" | "soft" | "bordered" | "dot" | solid | Visual style variant. |
shadow | "none" | "xs" | "xs-sm" | "sm" | "md" | "lg" | none | Box-shadow depth. |
size | "xs" | "xs-sm" | "sm" | "md" | "lg" | "xl" | md | Chip size. |
color | "default" | "primary" | "secondary" | "info" | "success" | "warning" | "danger" | default | Semantic color. |
radius | "none" | "xs" | "xs-sm" | "sm" | "md" | "lg" | "full" | full | Border radius. |
colorDepth | 50 | 100 | ... | 950 | 500 | Shade depth for the selected color. |
variant
"solid" | "soft" | "bordered" | "dot"
Default: solid
Visual style variant.
shadow
"none" | "xs" | "xs-sm" | "sm" | "md" | "lg"
Default: none
Box-shadow depth.
size
"xs" | "xs-sm" | "sm" | "md" | "lg" | "xl"
Default: md
Chip size.
color
"default" | "primary" | "secondary" | "info" | "success" | "warning" | "danger"
Default: default
Semantic color.
radius
"none" | "xs" | "xs-sm" | "sm" | "md" | "lg" | "full"
Default: full
Border radius.
colorDepth
50 | 100 | ... | 950
Default: 500
Shade depth for the selected color.
| Prop | Type | Default | Description |
|---|---|---|---|
isDisabled | boolean | false | Disables interaction. |
selected | boolean | — | Controlled selected state; renders as a toggleable role="button" chip. |
defaultSelected | boolean | — | Uncontrolled initial selected state. |
isDisabled
boolean
Default: false
Disables interaction.
selected
boolean
Default: —
Controlled selected state; renders as a toggleable role="button" chip.
defaultSelected
boolean
Default: —
Uncontrolled initial selected state.
| Prop | Type | Default | Description |
|---|---|---|---|
onClose | (e: PressEvent) => void | — | Shows a close button and is called when it's pressed. |
onSelectedChange | (selected: boolean) => void | — | Called when selected state changes. |
onClose
(e: PressEvent) => void
Default: —
Shows a close button and is called when it's pressed.
onSelectedChange
(selected: boolean) => void
Default: —
Called when selected state changes.
| Prop | Type | Default | Description |
|---|---|---|---|
classNames | Partial<Record<ChipSlot, string>> | — | Per-slot class overrides (base/content/dot/avatar/closeButton/endContent). |
className | string | — | Class applied to the root element. |
style | CSSProperties | — | Inline styles for the root element. |
classNames
Partial<Record<ChipSlot, string>>
Default: —
Per-slot class overrides (base/content/dot/avatar/closeButton/endContent).
className
string
Default: —
Class applied to the root element.
style
CSSProperties
Default: —
Inline styles for the root element.
