Chip

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

Usage & Examples

Default

default.tsx

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

Theme Mappings

Primary notification

Secondary notification

Tertiary notification

Quaternary notification

theme-mappings.tsx

<Chip message="Primary notification" theme="primary" visible usePortal={false} autoClose={false} />
  <Chip message="Secondary notification" theme="secondary" visible usePortal={false} autoClose={false} />
  <Chip message="Tertiary notification" theme="tertiary" visible usePortal={false} autoClose={false} />
  <Chip message="Quaternary notification" theme="quaternary" visible usePortal={false} autoClose={false} />

Semantic Feedback

Changes saved successfully

Connection is unstable

Upload could not be completed

A new version is available

semantic-feedback.tsx

<Chip message="Changes saved successfully" state="success" icon={FaCheckCircle} visible usePortal={false} autoClose={false} />
  <Chip message="Connection is unstable" state="warning" icon={FaExclamationTriangle} visible usePortal={false} autoClose={false} />
  <Chip message="Upload could not be completed" state="error" icon={FaExclamation} visible usePortal={false} autoClose={false} />
  <Chip message="A new version is available" state="info" icon={FaInfoCircle} visible usePortal={false} autoClose={false} />

Sizes and Surfaces

Small chip

Medium chip

Large chip

Glass notification

sizes-and-surfaces.tsx

<Chip message="Small chip" size="small" visible usePortal={false} autoClose={false} />
  <Chip message="Medium chip" size="medium" visible usePortal={false} autoClose={false} />
  <Chip message="Large chip" size="large" visible usePortal={false} autoClose={false} />
  <Chip message="Glass notification" theme="secondary" variant="glass" rounding="large" shadow="strong" visible usePortal={false} autoClose={false} />

Props API

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).
`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.
`onClose`	`(() => void)`	No	events	`—`	Callback when the chip is closed manually or automatically.