DesignDojo
1.2-components · 10-badge

Estimated time: 5 min

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.

Progress saves locally on this device.

Learning Loop

Lock this lesson in with a fast cycle: quiz the module, drill flashcards, then run the daily challenge.

Take Module QuizPractice FlashcardsRun Daily Challenge

Next Lesson

Avatar