Designing badges and chips in Figma: status tags, filters, and handoff

Quick answer

Badges and chips in Figma are compact horizontal auto-layout components with optional leading icon, label text, and (for chips) a dismiss or trailing action. Publish a component set with variants for type=status | filter | tag, state=default | hover | selected | disabled, and tone=neutral | success | warning | error | info. Bind fills and text to semantic color tokens—not one-off hex per screen. Document max width, truncation, and keyboard focus in Dev Mode descriptions. Pair with cards, tables, and navigation tabs. Start from the Figma guides hub if you are new to component libraries.

---

Who this is for

• Product designers shipping status labels, filter bars, and tag inputs.
• Design system teams who need one chip primitive instead of six slightly different pills per squad.
• Engineers implementing MUI Chips, Radix Badge, or Tailwind badge utilities who need tone and state rules.

---

Badge vs chip: pick the right pattern

Pattern	Interaction	Best for	Avoid when
Status badge	Read-only	Order state, role labels, counts on nav	Multi-select filters
Filter chip	Toggle selected	Search filters, category pills	Static metadata with no action
Input chip / tag	Removable	Email recipients, skill tags	System status that should not be dismissed
Dot badge	Read-only indicator	Unread count, online status	Long text labels
Avatar badge	Read-only overlay	Notification count on profile photo	Primary navigation labels

Verdict: if the user toggles or removes it, call it a chip and ship selected + dismiss states. If it only communicates status, call it a badge and keep interaction out of v1.

---

Component anatomy

Part	Badge	Chip
Container	Pill or rounded rect	Same; often slightly taller for touch
Leading icon	Optional (16px)	Optional (checkmark when selected)
Label	1–2 words typical	Same; may truncate
Trailing icon	Rare (info)	Close × for dismissible tags
Min height	20–24px (dense)	32–36px (touch-friendly filters)

Structure as Badge / Base and Chip / Base as separate component sets—do not merge status badges and filter chips into one confusing variant matrix.

---

Recommended component structure

Badge / Status
├── Variant: tone=neutral | success | warning | error | info
├── Variant: size=sm | md
├── Property: hasIcon=true | false
├── Layer: Container (horizontal auto layout, padding token)
│   ├── Icon slot (optional)
│   └── Label (text style text/label-sm)

Chip / Filter
├── Variant: state=default | hover | selected | disabled
├── Variant: size=md | sm
├── Property: dismissible=true | false
├── Layer: Container (horizontal auto layout)
│   ├── Leading icon (optional)
│   ├── Label
│   └── Dismiss icon button (nested component)

1. Set horizontal padding 8–12px and gap 4px between icon and label.
2. Use corner radius radius/full (9999) for pills or radius/md for rounded rects—pick one system-wide.
3. Bind container fill to semantic tokens (surface/badge-success, text/on-badge-success) from your color system.

---

Status tone mapping

Tone	Typical use	Design note
Neutral	Draft, archived, default	Do not overuse gray—readers ignore it
Success	Paid, active, complete	Pair with icon only if color-blind safety needs it
Warning	Pending, expiring	Not the same as error—keep hue distinct
Error	Failed, blocked, overdue	Use sparingly in dense tables
Info	New, beta, informational	Often blue; document vs link color

Run accessibility contrast checks on every tone against light and dark backgrounds. Preview both modes using dark mode token tricks.

---

Layout patterns

Inline with headings

Place badges after the title in a horizontal auto layout row with align: center and gap 8px. Set badge flex-shrink: 0 so long titles wrap without squashing the pill.

Filter bar

1. Parent frame: horizontal auto layout, wrap enabled, gap 8px.
2. Each chip: filter component instance.
3. Add “Clear all” text button at the end—not a chip.

Document single vs multi-select behavior in the chip group description. Selected state should use filled background; default uses outline or muted fill.

Table cells

Keep badges left-aligned in data columns. For sortable status columns, show badge + optional sort icon in header—not inside every row badge.

Card metadata

Stack badges below the title or in the header row per card anatomy. Limit to two badges per card; overflow extras into a +3 neutral badge.

---

States and interaction specs

State	Visual	Document for dev
Default	Base tone	—
Hover	Slightly darker fill or outline	Pointer cursor on interactive chips only
Selected	Filled + check or bold border	aria-pressed for toggle chips
Focus	Visible ring outside pill	Ring offset 2px; never remove for aesthetics
Disabled	Reduced opacity	No dismiss on disabled input chips
Dismiss hover	Icon button hover state	Hit area ≥ 24px

Use interactive component states for hover on filter chips in prototypes—not for static status badges.

---

Typography and sizing

Size	Font	Min height	Use when
sm	11–12px label	20px	Dense tables, sidebar counts
md	12–13px label	24–28px	Default product UI
lg	13–14px label	32px+	Marketing, touch-first filters

Publish label text styles from typography scales. Never local-style badge text—it breaks when marketing copies instances.

---

Truncation and overflow

Long labels break filter bars. Document:

1. Max width (e.g. 120px) with ellipsis in code.
2. Tooltip on hover for full text—link to tooltip and popover guide.
3. Character limit in content guidelines (e.g. status labels ≤ 14 characters).

Design one truncated variant artboard so engineers see ellipsis behavior, not only ideal two-word labels.

---

Handoff to engineering

Deliverable	Where it lives
Tone → token map	Component description + variables table
Selected vs default	Variant names = boolean or enum in code
Dismiss action	Nested icon button component with size token
Spacing	Auto layout padding = spacing token
Focus ring	Separate focus variant or description with CSS outline spec

Use Dev Mode checklist items for every chip group. Export semantic colors via dev handoff plugins when tokens exceed native inspect.

---

Comparison: native Figma vs UI kits

Approach	Best for	Limitation
Native component sets	Production libraries aligned to code	You define tones and states
UI kit chips	Early exploration	May not match your token names
Icon plugins	Leading icons in badges	Does not replace component structure

Verdict: build a thin native set (badge + chip) tied to your code library; reference UI kits for layout inspiration only.

---

Common mistakes

Mistake	Consequence	Fix
Hex color per badge	Token drift across themes	Semantic tone variants
Clickable status badges	Users expect filters	Separate badge vs chip components
Missing focus ring	Keyboard users lost	Focus variant on interactive chips
Dismiss icon too small	Touch failures	24px min hit target on ×
Too many tones	Rainbow noise in tables	Cap at 5 tones + neutral
Detached pills per screen	Unmaintainable	Library instances only

---

FAQ

Should count badges be a separate component?

Yes—Badge / Count with size variants (9+ overflow) keeps nav and avatar overlays consistent. Dot-only indicators can be a boolean property on avatar components.

How do chips relate to dropdown filters?

Chips show active filters; the dropdown menu or form select is where users pick them. Prototype: menu → chip appears in bar.

One component set or two for badge and chip?

Two sets minimum. Merging read-only badges with dismissible filter chips creates variant explosion and confuses engineers mapping props.

Do badges need dark mode variants?

If you use variables with modes, one component set covers both. If not, ship paired artboards and note dark mode preview workflow.

---

Bottom line

Ship badge and chip as separate, token-backed component sets with clear tone and state variants. Keep status labels read-only; give filter and input tags selected, focus, and dismiss behavior with specs in Dev Mode. Review truncation and contrast before handoff, and keep instances linked from your team library. Continue with tooltips for truncated labels, form tags, and the tutorials hub.