Component Card

Badge

Apply compact status labels without competing with primary content.

Badge anatomy

When to Use

Status marking like New, Beta, Archived, or Paid.
Category labels to quickly classify content items.
Count chips for inbox totals or filter pills.

When NOT to Use

Use badges as secondary labels with restrained color and concise text.

If users need to trigger behavior, switch to Button.

Variants

Solid status

Outline tag

Numeric chip

Confused?

Use Badge for concise metadata and Alert for full warning or error messages.

Agent Prompts

Use the copy-ready Cursor and Pencil prompts in the prompt panel below this card.

Agent Prompts

Cursor Prompt

Implement badge variants for status, category, and numeric count using subtle backgrounds and readable text contrast.

Pencil Prompt

Add three badge styles for status labeling and keep their visual weight lower than primary headings.

Next Lesson

Avatar