Badges

Badge outline
Primary Secondary Success Danger Warning Info Dark
Regular Badges
Primary Secondary Success Danger Warning Info Light Dark
Badge Pill
Primary Secondary Success Danger Warning Info Light Dark
Badge Pill with Padding
Primary Secondary Success Danger Warning Info Light Dark
Badge link
Primary Secondary Success Danger Warning Info Light Dark
Sizing & Styles
    Medium Size
  • A D C E F G H I
  • A C D E F G H I
    • Large Size
  • A C D E F G H I
  • A C D E F G H I
    • Extra Large Size
  • A C D E F G H I
  • A C D E F G H I
More Styles & Options
    Wide badges for longer text:
  • New pending 203 hot fixed in process completed
    • Rounded badges examples:
  • New pending 203 hot fixed in process completed
Unified Styles
    Circle and Square Unified Styles
  • A B C D E F G
  • A B C D E F G
Basic Examples
    Circle and Square Unified Styles:
  • A C D HOT NEW E F G H I
    Dot Styles Examples:
  • Pending Caption Heading Status
Outline Badges
    Basic state color badges:
  • A C D E F G H I