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
| Type | Description | |
|---|---|---|
| autoClose | boolean | Whether the chip should close automatically after a delay. |
| className | string | Additional class name for custom styling. |
| closeButtonAriaLabel | string | Custom accessible label for the close button. Defaults to "Close notification". |
| data-testid | string | Optional test ID for testing frameworks. |
| duration | number | Time in milliseconds before auto-closing (default: 3000). |
| icon | ElementType | Optional icon component to show on the left side. |
| iconAriaLabel | string | Accessible label for the leading icon when it is not decorative. |
| iconDecorative | boolean | Whether the leading icon is decorative. When true, it will be hidden from assistive technology. Defaults to true. |
| id | string | Optional unique ID for the chip. |
| message | string | Message text to display inside the chip. |
| messageId | string | Optional ID for the message element. If omitted, a stable fallback based on testId/id is used. |
| onClose | (() => void) | Callback when the chip is closed manually or automatically. |
| position | PositionType | Position of the chip on the screen ('topLeft' | 'topCenter' | 'topRight' | 'bottomLeft' | 'bottomCenter' | 'bottomRight'). |
| role | "none" | "alert" | "log" | "presentation" | "status" | ARIA role for the chip container. Defaults to "alert". |
| rounding | RoundingType | Rounding style for the chip ('none' | 'small' | 'medium' | 'large' | 'full'). |
| shadow | ShadowType | Shadow style for the chip ('none' | 'light' | 'medium' | 'strong' | 'intense'). |
| size | SizeType | Size of the chip ('xs' | 'small' | 'medium' | 'large' | 'xl'). |
| stackIndex | number | Index for stacking multiple chips, useful for z-index logic. |
| state | StateType | State of the chip ('success' | 'error' | 'warning' | 'disabled' | ''). |
| theme | ThemeType | Theme color for the chip ('primary' | 'secondary' | 'tertiary' | 'quaternary' | 'clear'). |
| usePortal | boolean | Whether to use a portal for rendering the chip. |
| visible | boolean | Whether the chip is currently visible. |