- Light
- Dark
- Darkest
- Medium
- Large
- LTR
- RTL
- Default
- Express
Badge
Component status | Contribution |
---|---|
Last released | May 23, 2023 |
Current version | @spectrum-css/badge@3.0.33 |
Usage notes
- Badge may include a label with no icon, an icon with no label, or an icon with a label
- Badge t-shirt sizes correspond to icon sizes
- Fixed positioning impacts the border radius of the badge component
Variants
StandardContribution
Neutral
Accent
Informative
Positive
Negative
Show markup
<div class="spectrum-Badge spectrum-Badge--sizeM spectrum-Badge--neutral">
<div class="spectrum-Badge-label">Neutral</div>
</div>
<div class="spectrum-Badge spectrum-Badge--sizeM spectrum-Badge--accent">
<div class="spectrum-Badge-label">Accent</div>
</div>
<div class="spectrum-Badge spectrum-Badge--sizeM spectrum-Badge--informative">
<div class="spectrum-Badge-label">Informative</div>
</div>
<div class="spectrum-Badge spectrum-Badge--sizeM spectrum-Badge--positive">
<div class="spectrum-Badge-label">Positive</div>
</div>
<div class="spectrum-Badge spectrum-Badge--sizeM spectrum-Badge--negative">
<div class="spectrum-Badge-label">Negative</div>
</div>
SizingContribution
Label Only
Small
Medium
Large
Extra Large
Icon Only
Icon with Label
Small
Medium
Large
Extra Large
Show markup
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Label Only</h4>
<br>
<div class="spectrum-Badge spectrum-Badge--sizeS spectrum-Badge--neutral">
<div class="spectrum-Badge-label">Small</div>
</div>
<div class="spectrum-Badge spectrum-Badge--sizeM spectrum-Badge--neutral">
<div class="spectrum-Badge-label">Medium</div>
</div>
<div class="spectrum-Badge spectrum-Badge--sizeL spectrum-Badge--neutral">
<div class="spectrum-Badge-label">Large</div>
</div>
<div class="spectrum-Badge spectrum-Badge--sizeXL spectrum-Badge--neutral">
<div class="spectrum-Badge-label">Extra Large</div>
</div>
<br>
<br>
<hr>
<br>
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Icon Only</h4>
<br>
<div class="spectrum-Badge spectrum-Badge--sizeS spectrum-Badge--neutral">
<svg class="spectrum-Icon spectrum-Icon--sizeS spectrum-Badge-icon spectrum-Badge-icon--no-label" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-icon-18-Info" />
</svg>
</div>
<div class="spectrum-Badge spectrum-Badge--sizeM spectrum-Badge--neutral">
<svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Badge-icon spectrum-Badge-icon--no-label" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-icon-18-Info" />
</svg>
</div>
<div class="spectrum-Badge spectrum-Badge--sizeL spectrum-Badge--neutral">
<svg class="spectrum-Icon spectrum-Icon--sizeL spectrum-Badge-icon spectrum-Badge-icon--no-label" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-icon-18-Info" />
</svg>
</div>
<div class="spectrum-Badge spectrum-Badge--sizeXL spectrum-Badge--neutral">
<svg class="spectrum-Icon spectrum-Icon--sizeXL spectrum-Badge-icon spectrum-Badge-icon--no-label" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-icon-18-Info" />
</svg>
</div>
<br>
<br>
<hr>
<br>
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Icon with Label</h4>
<br>
<div class="spectrum-Badge spectrum-Badge--sizeS spectrum-Badge--neutral">
<svg class="spectrum-Icon spectrum-Icon--sizeS spectrum-Badge-icon spectrum-Badge-icon" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-icon-18-Info" />
</svg>
<div class="spectrum-Badge-label">Small</div>
</div>
<div class="spectrum-Badge spectrum-Badge--sizeM spectrum-Badge--neutral">
<svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Badge-icon spectrum-Badge-icon" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-icon-18-Info" />
</svg>
<div class="spectrum-Badge-label">Medium</div>
</div>
<div class="spectrum-Badge spectrum-Badge--sizeL spectrum-Badge--neutral">
<svg class="spectrum-Icon spectrum-Icon--sizeL spectrum-Badge-icon spectrum-Badge-icon" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-icon-18-Info" />
</svg>
<div class="spectrum-Badge-label">Large</div>
</div>
<div class="spectrum-Badge spectrum-Badge--sizeXL spectrum-Badge--neutral">
<svg class="spectrum-Icon spectrum-Icon--sizeXL spectrum-Badge-icon spectrum-Badge-icon" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-icon-18-Info" />
</svg>
<div class="spectrum-Badge-label">Extra Large</div>
</div>
Text WrappingContribution
Label Text Wrapping Behavior
Show markup
<div class="spectrum-Badge spectrum-Badge--sizeM spectrum-Badge--neutral" style="max-width: 175px;">
<svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Badge-icon spectrum-Badge-icon" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-icon-18-Info" />
</svg>
<div class="spectrum-Badge-label">Label Text Wrapping Behavior</div>
</div>
Fixed EdgeContribution
Fixed Inline Start
Label Text
Fixed Inline End
Label Text
Fixed Block Start
Label Text
Fixed Block End
Label Text
Show markup
<div class="spectrum-Examples">
<div class="spectrum-Examples-item">
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Fixed Inline Start</h4>
<div class="spectrum-Badge spectrum-Badge--sizeM spectrum-Badge--neutral spectrum-Badge--fixed-inline-start">
<svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Badge-icon spectrum-Badge-icon" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-icon-18-Info" />
</svg>
<div class="spectrum-Badge-label">Label Text</div>
</div>
</div>
<div class="spectrum-Examples-item">
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Fixed Inline End</h4>
<div class="spectrum-Badge spectrum-Badge--sizeM spectrum-Badge--neutral spectrum-Badge--fixed-inline-end">
<svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Badge-icon spectrum-Badge-icon" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-icon-18-Info" />
</svg>
<div class="spectrum-Badge-label">Label Text</div>
</div>
</div>
<div class="spectrum-Examples-item">
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Fixed Block Start</h4>
<div class="spectrum-Badge spectrum-Badge--sizeM spectrum-Badge--neutral spectrum-Badge--fixed-block-start">
<svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Badge-icon spectrum-Badge-icon" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-icon-18-Info" />
</svg>
<div class="spectrum-Badge-label">Label Text</div>
</div>
</div>
<div class="spectrum-Examples-item">
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Fixed Block End</h4>
<div class="spectrum-Badge spectrum-Badge--sizeM spectrum-Badge--neutral spectrum-Badge--fixed-block-end">
<svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Badge-icon spectrum-Badge-icon" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-icon-18-Info" />
</svg>
<div class="spectrum-Badge-label">Label Text</div>
</div>
</div>
</div>
Text and Icon ColorContribution
White (default)
Label Text
Black
Label Text
Show markup
<div class="spectrum-Examples">
<div class="spectrum-Examples-item">
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">White (default)</h4>
<div class="spectrum-Badge spectrum-Badge--sizeM spectrum-Badge--neutral">
<svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Badge-icon spectrum-Badge-icon" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-icon-18-Info" />
</svg>
<div class="spectrum-Badge-label">Label Text</div>
</div>
</div>
<div class="spectrum-Examples-item">
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Black</h4>
<div class="spectrum-Badge spectrum-Badge--sizeM spectrum-Badge--neutral spectrum-Badge--black-text">
<svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Badge-icon spectrum-Badge-icon" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-icon-18-Info" />
</svg>
<div class="spectrum-Badge-label">Label Text</div>
</div>
</div>
</div>
Custom Properties API
This component can be modified via its --mod-*
prefixed custom properties. A list of those prefixed custom properties can be found here.
Migration Guide
Badge now includes icon and label elements
- Label and icon elements must be nested inside a parent container of class
.spectrum-Badge
in order to achieve the correct layout and wrapping behavior. - Layout of Badge is applied with a display of inline-flex, allowing badge to display as inline while the child elements for the label and icon utilize flexbox for layout.
Badge now includes white text/icon color and black text/icon color
- The color is applied to the parent container so that the icon and text child elements will inherit a unified color.
- White text/icon color is the default and requires no additional class.
- Black text/icon color is applied to the parent container with modifier class
.spectrum-Badge--black-text
Badge now includes fixed positioning
- This document represents the border radius style which applies to each position.
- border radius is 0 along the fixed edge of the component.
- The actual component position is not represented in this document.