Skip to main content

Figma Storybook

Badge

A small label used to display statuses or short metadata values on UI elements. Use when you need to communicate a status or attribute at a glance. Don't use for numeric counts — use Pill instead.

Figma Storybook Docs

Description

What it does

Badge renders a short text label in a visually distinct pill or chip, typically used to communicate the status or category of the element it's attached to.

Where it appears

Component status indicators, content type labels, filter tags, table cells showing state, and list item metadata across Open Point and Social Point.

Why it exists

Consistent badge treatment lets users quickly scan and parse status or category information without reading full prose. A single visual language for status prevents each team from building their own label styles.

Dependencies

For numeric counts, use Pill. For priority-specific labels with leading icons, use Badge Priority. For interactive filter chips, use Tag.

Variants

Default

Neutral / no status

When the item has no particular status — a neutral label or category value.

Success

Positive / complete

Item is active, published, approved, or in a positive end state.

Warning

Attention required

Item is approaching a limit, pending review, or needs action.

Error

Problem / blocked

Item has failed, been rejected, or is in an error state.

Info

Informational

Supplementary metadata — not a status signal, just contextual information.

Usage guidelines

When to use

  • Communicating the status of a record or item in a list or table.
  • Labelling a content type or category inline alongside a title.
  • Showing a count of something that isn't purely numeric (e.g. "Draft", "Legacy").

When not to use

  • For numeric counts — use Pill.
  • For interactive filtering — use Tag or Tag Group.
  • When the label needs a leading icon for urgency or priority — use Badge Priority.
  • As a standalone call-to-action — badges are non-interactive labels only.

Was this page helpful?

Updated 9 September 2026