Chips are compact elements that represent an input, attribute, or action. Chips allow users to enter information, make selections, filter content, or trigger actions. Chips should appear dynamically as a group of multiple interactive elements. Unlike buttons, which should be a consistent and familiar call to action, one that a user expects to appear as the same action in the same general area.

Design Tips


Standard chips can be one of four sizes. The default size is medium.







Chips can be actionable, allowing them to receive focus and trigger user actions.

Chips should not be used to navigate to a new page.



Chips that appear in a list can be removable.

Clicking the "X" icon should remove the chip from its list. Hovering or focusing on the "X" displays a tooltip.


Use the removeButtonLabelPosition prop to change the location of the tooltip. The supported options are top, bottom, start, and end.

Dismissable ()

Dismissable chips are similar to removable chips, but without a separate target element for triggering the remove action. Instead, the entire chip receives focus and triggers the remove action.



By default, chip text wraps to multiple lines when the chip's width is contrained. To force chip text to a single line, use the singleLine prop.

Knights of Ni, we have brought you your shrubbery.

Knights of Ni, we have brought you your shrubbery.

Avatar Chip

Avatar chips help quickly identify and add entities like people, groups, or departments.

Avatar chips can only be the compact chip size. The logic for displaying the avatar image matches the Avatar component, with showInitials set by default.

Sir Lancelot

Show code

Removable Avatar Chip

Avatar chips can also be made removable.


King Arthur

Show code

Custom Avatar Chip

It's possible to customize the avatar content displayed using the renderAvatar prop.

Best Practices

BUC Link