Chip Group

The Chip Group component displays a group of chip notifications in a uniform position, supports ref methods.

Usage

Default

    <ChipGroup chips={chips} onRemove={(id) => setChips(prev => prev.filter(c => c.id !== id))} />

    Props

    Sortable data table
    PropTypeDefaultDescription
    chipsChipProps[]-Array of chip objects to display in the group.
    onRemove(id: string) => void-Callback fired when a chip's close button is clicked.
    position"topLeft" | "topCenter" | "topRight" | "bottomLeft" | "bottomCenter" | "bottomRight""topCenter"Position of the group on the screen (used for toast/fixed display).
    size"xs" | "small" | "medium" | "large" | "xl"Configured DefaultSize for all chips in the group.
    classNamestring-Additional CSS class names to apply to the group container.