- Lightest
- Light
- Dark
- Darkest
- Medium
- Large
- LTR
- RTL
Badge
| Component status | Contribution |
|---|---|
| Last released | Unreleased |
| Current version | @spectrum-css/badge@1.0.1-alpha.1 |
Variants
StandardContribution
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>
SizingContribution
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>