• Light
  • Dark
  • Darkest
  • Medium
  • Large
  • LTR
  • RTL
  • Default
  • Express

Badge

Component status
Contribution
Last releasedMay 23, 2023
Current version@spectrum-css/badge@3.0.33
View guidelines
Spectrum website
View repository
GitHub
View package
npm

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

Standard
Contribution

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>

Sizing
Contribution

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 Wrapping
Contribution

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 Edge
Contribution

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 Color
Contribution

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.