Chip & Badge
Preview Frames X
Chip & Badge
in Figma
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.
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.
The perfect starting point for your next project in Figma
Start and finish design projects faster with the world's most robust UI kit for Figma. Our UI elements, components, and templates are built to help you create designs easily and more efficiently.
With the Frames X UI kit, you can easily take on bigger, more ambitious projects with confidence.