Chip
To help people enter information, make selections, filter content, or trigger actions.
Name@spark-ui/chip
Version1.0.1
LicenseMIT
Chip#
| Attribute | Type | Description | Default |
| defaultPressed | boolean | Configures a toggleButton aria-pressed initial value | null |
| pressed | boolean | Configures a toggleButton aria-pressed value | null |
| asChild | boolean | Change the component to the HTML tag or custom component of the only child. | null |
| onClick | (event: React.MouseEvent<HTMLButtonElement, MouseEvent>, args: { pressed: boolean; value?: string | number | readonly string[]; }) => void | event handler fired each clicking event | null |
| onClear | (event?: React.MouseEvent<HTMLButtonElement>) => void | Clear chip handler | null |
| design | "outlined" | "tinted" | "dashed" | Main style of the chip. - `filled`: Chip will be plain. - `outlined`: Chip will be transparent with an outline. - `tinted`: Chip will be filled but using a lighter color scheme. - `dashed`: Chip will be transparent with an outline dashed. | null |
| disabled | boolean | Disable the chip, preventing user interaction and adding opacity. | null |
| intent | "main" | "support" | "basic" | "accent" | "success" | "alert" | "danger" | "info" | "neutral" | "surface" | Color scheme of the chip. | null |