Badges

Badge outline
PrimarySecondarySuccessDangerWarningInfoDark
Regular Badges
PrimarySecondarySuccessDangerWarningInfoLightDark
Badge Pill
PrimarySecondarySuccessDangerWarningInfoLightDark
Badge Pill with Padding
PrimarySecondarySuccessDangerWarningInfoLightDark
Badge link
PrimarySecondarySuccessDangerWarningInfoLightDark
Sizing & Styles
    Medium Size
  • ADCEFGHI
  • ACDEFGHI
    • Large Size
  • ACDEFGHI
  • ACDEFGHI
    • Extra Large Size
  • ACDEFGHI
  • ACDEFGHI
More Styles & Options
    Wide badges for longer text:
  • Newpending 203 hot fixed in process completed
    • Rounded badges examples:
  • Newpending 203 hot fixed in process completed
Unified Styles
    Circle and Square Unified Styles
  • ABCDEFG
  • ABCDEFG
Basic Examples
    Circle and Square Unified Styles:
  • ACDHOTNEWEFGHI
    Dot Styles Examples:
  • Pending Caption Heading Status
Outline Badges
    Basic state color badges:
  • ACDEFGHI