Chip

Use GdsChip for compact elements that represent an input, attribute, or action. It is currently a thin wrapper around MUI Chip; GDS-specific theme overrides will be added separately.

Basic Chip

The Chip component supports filled and outlined styling.

Chip Actions

Chips can be clickable, deletable, or both. These actions follow MUI behavior.

Clickable

Deletable

Use onDelete to show the delete icon and handle removal.

Clickable And Deletable

Clickable Link

Custom Delete Icon

Chip Adornments

Use avatar or icon to add content before the label.

Avatar Chip

Icon Chip

Color Chip

Use the color prop to apply a color from the MUI theme palette.

Sizes Chip

Use size="small" for a compact Chip.

Multiline Chip

By default, chips display labels in a single line. Use sx when multiline content is needed.

Chip Array

Render chips from an array of values and remove items through onDelete.

Props