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

Badge

Component status
Contribution
Last releasedOctober 25, 2021
Current version@spectrum-css/badge@1.0.2

Variants


Standard
Contribution

Neutral Informative Positive Negative Fuchsia Indigo Magenta Purple Seafoam Yellow
Show markup
<span class="spectrum-Badge spectrum-Badge--sizeM spectrum-Badge--neutral">Neutral</span>
<span class="spectrum-Badge spectrum-Badge--sizeM spectrum-Badge--informative">Informative</span>
<span class="spectrum-Badge spectrum-Badge--sizeM spectrum-Badge--positive">Positive</span>
<span class="spectrum-Badge spectrum-Badge--sizeM spectrum-Badge--negative">Negative</span>
<span class="spectrum-Badge spectrum-Badge--sizeM spectrum-Badge--fuchsia">Fuchsia</span>
<span class="spectrum-Badge spectrum-Badge--sizeM spectrum-Badge--indigo">Indigo</span>
<span class="spectrum-Badge spectrum-Badge--sizeM spectrum-Badge--magenta">Magenta</span>
<span class="spectrum-Badge spectrum-Badge--sizeM spectrum-Badge--purple">Purple</span>
<span class="spectrum-Badge spectrum-Badge--sizeM spectrum-Badge--seafoam">Seafoam</span>
<span class="spectrum-Badge spectrum-Badge--sizeM spectrum-Badge--yellow">Yellow</span>

Sizing
Contribution

Small Medium Large Extra Large
Show markup
<span class="spectrum-Badge spectrum-Badge--sizeS spectrum-Badge--neutral">Small</span>
<span class="spectrum-Badge spectrum-Badge--sizeM spectrum-Badge--neutral">Medium</span>
<span class="spectrum-Badge spectrum-Badge--sizeL spectrum-Badge--neutral">Large</span>
<span class="spectrum-Badge spectrum-Badge--sizeXL spectrum-Badge--neutral">Extra Large</span>