Chip
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
Sizes
Standard chips can be one of four sizes. The default size is medium.
Small
Compact
Medium
Large
Behavior
Actionable
Chips can be actionable, allowing them to receive focus and trigger user actions.
Chips should not be used to navigate to a new page.
Actionable
Removable
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.
Removable
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.
Dismissable
Overflow
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.
KA
King Arthur
Show code
Custom Avatar Chip
It's possible to customize the avatar content displayed using the renderAvatar prop.