Badge

A small inline pill label. Use color modifiers to convey status or category.

Basic usage

blue badge: New
green badge: Active
red badge: Error
yellow badge: Warning
gray badge: Draft
purple badge: Beta

Inside a card

Badges in a row never stretch — they always shrink to fit their content:

row:
  1/2 card:
    ## Pro plan
    blue badge: Popular
    Full access to all features.
    full primary button: Start Free Trial

  1/2 card:
    ## Free plan
    gray badge: Limited
    Perfect for solo projects.
    full outline button: Get Started

All color variants

blue badge: New
red badge: Error
green badge: Active
yellow badge: Warning
purple badge: Beta
gray badge: Draft

Reference

Modifier	Effect
blue	Blue background
red	Red background
green	Green background
yellow	Yellow background
purple	Purple background
gray	Gray background