Chip & Badge

UI Chips vs Badges

The Chip component presents information concisely and can contain data about a person, place, or process in the system. Often interactive, chips can trigger actions like activation, deactivation, or inclusion/exclusion of UI elements.

While visually similar, Badges are commonly used separately for system statuses and product features. They can be animated and interactive on hover but should only be used to navigate and highlight other content and not to execute actions.

Chip, BadgeFill, and BadgeGhost components

Chip UI are used as an alternative to Buttons. Compared to buttons, chips can only appear in a group of other Chips/Actions.

Chips allow users to enter, activate, or select information, such as search tags or contact names. You can use chips to let users select from a set of options, such as a list of products or a row of filters. Note that chips should always include an actionable icon and indicate a clickable element.

Badges are complementary components used to draw user attention to a specific element or function. They can also add visual cues to important on-page information or act as a navigation link.