Figma Chip & Badge

Chips vs. Badges Components

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.

Chip & Badge Anatomy

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.

When to Use Chip vs. Badge Components

Chip UI is used as an alternative to Buttons or Button Groups. Compared to regular 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.