Chip
The Chip component displays small, contextual messages or notifications. It supports icons and floating positions.
Usage
Default
<Chip id="default" message="This is a chip message!" visible={visible} usePortal onClose={...} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| id | string | - | Unique identifier for the chip. |
| message | string | - | Content displayed inside the chip. |
| visible | boolean | - | Controls visibility of the chip. |
| onClose | () => void | - | Callback fired when the close icon is clicked. |
| icon | ReactNode | - | Optional icon displayed in the chip. |
| closeIcon | ReactNode | - | Custom close icon component (if closable). |
| size | "xs" | "small" | "medium" | "large" | "xl" | Configured Default | Size of the chip. |
| theme | "primary" | "secondary" | "tertiary" | "quaternary" | "clear" | Configured Default | Visual theme of the chip. |
| state | "" | "success" | "error" | "warning" | - | Chip state styling. |
| rounding | "none" | "small" | "medium" | "large" | Configured Default | Border radius style of the chip. |
| shadow | "none" | "light" | "medium" | "strong" | "intense" | Configured Default | Shadow style applied to the chip. |
| position | "topLeft" | "topCenter" | "topRight" | "bottomLeft" | "bottomCenter" | "bottomRight"" | "topCenter" | Position of the chip when floating. |
| usePortal | boolean | true | Render chip inside a portal. |
| autoClose | boolean | true | Whether the chip should auto-close. |
| duration | number | 3000 | Auto-close timeout in milliseconds. |
| className | string | - | Additional CSS class names. |
| data-testid | string | "chip" | Test ID for end-to-end or unit testing. |