• Lightest
  • Light
  • Dark
  • Darkest
  • Medium
  • Large
  • LTR
  • RTL

Badge

Component status
Contribution
Last releasedUnreleased
Current version@spectrum-css/badge@1.0.1-alpha.0
View guidelines
Spectrum website
View repository
GitHub
View package
npm

Variants

Standard
Contribution

Grey Badge Red Badge Orange Badge Yellow Badge Seafoam Badge Green Badge Blue Badge Fuchsia Badge
Show markup
<span class="spectrum-Badge spectrum-Badge--grey">Grey Badge</span>
<span class="spectrum-Badge spectrum-Badge--red">Red Badge</span>
<span class="spectrum-Badge spectrum-Badge--orange">Orange Badge</span>
<span class="spectrum-Badge spectrum-Badge--yellow">Yellow Badge</span>
<span class="spectrum-Badge spectrum-Badge--seafoam">Seafoam Badge</span>
<span class="spectrum-Badge spectrum-Badge--green">Green Badge</span>
<span class="spectrum-Badge spectrum-Badge--blue">Blue Badge</span>
<span class="spectrum-Badge spectrum-Badge--fuchsia">Fuchsia Badge</span>

Activity badges
Contribution

Active Inactive
Show markup
<span class="spectrum-Badge spectrum-Badge--active">Active</span>
<span class="spectrum-Badge spectrum-Badge--inactive">Inactive</span>

Small
Contribution

A small badge.

Grey Badge Red Badge Orange Badge Yellow Badge Seafoam Badge Green Badge Blue Badge Fuchsia Badge
Show markup
<span class="spectrum-Badge spectrum-Badge--small spectrum-Badge--grey">Grey Badge</span>
<span class="spectrum-Badge spectrum-Badge--small spectrum-Badge--red">Red Badge</span>
<span class="spectrum-Badge spectrum-Badge--small spectrum-Badge--orange">Orange Badge</span>
<span class="spectrum-Badge spectrum-Badge--small spectrum-Badge--yellow">Yellow Badge</span>
<span class="spectrum-Badge spectrum-Badge--small spectrum-Badge--seafoam">Seafoam Badge</span>
<span class="spectrum-Badge spectrum-Badge--small spectrum-Badge--green">Green Badge</span>
<span class="spectrum-Badge spectrum-Badge--small spectrum-Badge--blue">Blue Badge</span>
<span class="spectrum-Badge spectrum-Badge--small spectrum-Badge--fuchsia">Fuchsia Badge</span>

Large
Contribution

A large badge.

Grey Badge Red Badge Orange Badge Yellow Badge Seafoam Badge Green Badge Blue Badge Fuchsia Badge
Show markup
<span class="spectrum-Badge spectrum-Badge--large spectrum-Badge--grey">Grey Badge</span>
<span class="spectrum-Badge spectrum-Badge--large spectrum-Badge--red">Red Badge</span>
<span class="spectrum-Badge spectrum-Badge--large spectrum-Badge--orange">Orange Badge</span>
<span class="spectrum-Badge spectrum-Badge--large spectrum-Badge--yellow">Yellow Badge</span>
<span class="spectrum-Badge spectrum-Badge--large spectrum-Badge--seafoam">Seafoam Badge</span>
<span class="spectrum-Badge spectrum-Badge--large spectrum-Badge--green">Green Badge</span>
<span class="spectrum-Badge spectrum-Badge--large spectrum-Badge--blue">Blue Badge</span>
<span class="spectrum-Badge spectrum-Badge--large spectrum-Badge--fuchsia">Fuchsia Badge</span>

No results found

Try another search term.