Badge

Small labels and indicators for status, categories, and notifications

Basic Badges

Simple badges with text content

New
Show Code

Badge Colors

Different color variants for various use cases

New
Show Code

Badge Sizes

Different sizes from xs to lg

New
Show Code

Badge Variants

Filled and dashed styles

New
Show Code

Status Badges

Badges for showing various status states

New
Show Code

Usage Notes

  • Use descriptive text that clearly indicates the badge purpose
  • Choose appropriate colors that match the semantic meaning
  • Content prop can be used for simple text or numbers
  • Children prop allows for complex content like icons
  • Outline variant provides a subtle alternative to filled badges
  • Position prop creates indicator-style badges
  • Keep badge text concise for better readability