Chip

The Chip component displays small, contextual messages or notifications. It supports icons and floating positions.

Usage & Examples

default.tsx

<Chip id="default" message="This is a chip message!" visible={visible} usePortal onClose={...} />

Chip props API
				Default	Description
`autoClose`	`boolean`	No	props	`true`	Whether the chip should close automatically after a delay.
`className`	`string`	No	styling	`—`	Additional class name for custom styling.
`closeButtonAriaLabel`	`string`	No	props	`"Close notification"`	Custom accessible label for the close button. Defaults to "Close notification".
`data-testid`	`string`	No	testing	`—`	Backward-compatible alias for test ID attributes.
`duration`	`number`	No	props	`3000`	Time in milliseconds before auto-closing (default: 3000).
`glass`	`boolean`	No	props	`configured default glass setting (fallback: false)`	Applies a translucent frosted-glass treatment using the active theme palette.
`icon`	`ElementType`	No	props	`—`	Optional icon component to show on the left side.
`iconAriaLabel`	`string`	No	props	`—`	Accessible label for the leading icon when it is not decorative.
`iconDecorative`	`boolean`	No	props	`true`	Whether the leading icon is decorative. When true, it will be hidden from assistive technology. Defaults to true.
`id`	`string`	No	props	`—`	Optional unique ID for the chip.
`message`	`string`	Yes	props	`—`	Message text to display inside the chip.
`messageId`	`string`	No	props	`—`	Optional ID for the message element. If omitted, a stable fallback based on testId/id is used.