Figma Chip & Badge

Preview

Figma Chip & Badge

Chips vs. Badges Components

Chips and badges look alike: a small rounded label with short text. The difference is the job. A chip is a control users press. A badge is a status users read. Frames X ships three sets with 176 variants, so both come with icons, avatars and the four states wired.

Pick by interaction: if clicking it changes the screen, it is a chip, and if it only reports a state, it is a badge.

What is in the chip and badge sets

Chip. Icon Left, Icon Right and Avatar types in four sizes, with Default, Hover, Pressed and Active states.
BadgeDefault. Filled badges in Default, Warning, Success and Danger types, on the same four sizes and states.
BadgeSecondary. The quiet outline version of the same grid, for statuses that should not shout.

How to use chips and badges in Figma

Drop the instance and set the type: the icon side for chips, the color role for badges.
Size to the surface. XS lives in table cells and Large in filter bars.
Wire selection with the Active state for chips in a filter row.
Bind badge colors to the semantic variables, so Success and Danger follow the theme.
Group chips in an auto layout row and let it wrap when the tags multiply.

Badge vs chip comparison

Interaction. Chips respond to press: filter rows, tag pickers, contact tokens. Badges mark the element they sit on.
Placement. A chip stands in a group of chips and can replace a button group when options multiply. A badge attaches to one thing: a nav item, a card title, a table row.
Color. Chip types differ by content, icon or avatar. Badge types differ by meaning, Warning to Danger, which is why only badges carry the semantic palette.
Counts. The unread number on a tab or a nav item is a badge, and pressing it presses the element underneath.
Input. For tags the user types, the chip list input handles adding and removing chips.

Chip & Badge Anatomy

Set	Variants	Properties
Chip	48	Type Icon Left, Icon Right, AvatarSize XS, Small, Medium, LargeState Default, Hover, Pressed, Active
BadgeDefault	64	Type Default, Warning, Success, DangerSize XS, Small, Medium, LargeState Default, Hover, Pressed, Active
BadgeSecondary	64	Type Default, Warning, Success, DangerSize XS, Small, Medium, LargeState Default, Hover, Pressed, Active

The file carries a Chip set with 48 variants and two badge sets with 64 each, the same four sizes and states across all three.

Chip and badge AI prompt

Paste this into Claude, ChatGPT, or Figma Make:

Build chip and badge component sets in Figma. Chip: a rounded label with Icon Left, Icon Right and Avatar types, four sizes from XS to Large, and Default, Hover, Pressed and Active states. Badges: a filled and an outline set with Default, Warning, Success and Danger types on the same size and state grid. Bind badge colors to semantic variables, keep the text and icon slots swappable, and name the states so prototypes can wire hover and selection.

Badge vs chip FAQ

What is the difference between a badge and a chip?

The interaction model. A chip is a control: pressing it filters, selects or removes. A badge is a status mark on another element, a count, a Success label, a New tag. The sets share sizes and states, so the two stay visually consistent.

When should you use a status badge?

When an element needs a state readable at a glance: paid, failed, active, pending. Use the semantic types, Success to Danger, and keep one meaning per color across the product.

Can a chip contain an avatar?

Yes. The Avatar type ships in the chip set for people tokens, like assignees and recipients, in all four sizes.

Are badges clickable?

They respond to hover in the kit, and the press belongs to the element the badge sits on. When the label itself needs an action, use a chip.

Which components use chips and badges?

The chip list input manages tag entry, the table carries status badges in cells, and the kanban board heads each column with a badge.

Source