badges

Badges are labels which hold small amounts of information.

Badge Label

About Badges

Badges are composed of text inside a span element and may include inline/inline-block elements and/or icons.

Colors

There are six different color badges you can use.

Badge	class	description
Default Badge	`.slds-badge`	This is the default badge. You probably want to use this one unless you fall into a specific use-case.
Darker Badge	`.slds-badge_inverse`	This badge is used when you need higher contrast than our default badge.
Lightest Badge	`.slds-badge_lightest`	This badge is used when you need higher contrast, such as on colored backgrounds.
Success Badge	`.slds-badge .slds-theme_success`	This is a badge used to communicate success.
Warning Badge	`.slds-badge .slds-theme_warning`	This is a badge used to communicate a warning.
Error Badge	`.slds-badge .slds-theme_error`	This is a badge used to communicate an error.

Base

Badge Label

<span class="slds-badge">Badge Label</span>

Badges with Icons

You can include an icon in your badge. For maximum visual clarity, Utility icons are the suggested icon type inside badges. You may also choose to put an icon in a badge without text, but in that case, be sure to include assistive text.

The icon can be aligned to the left or right side of the text. To use an icon, wrap the icon with <span class="slds-badge__icon">. Add the classes slds-badge__icon_left or slds-badge__icon_right to the wrapper for spacing the icon in relation to the text label.

Base: Icon on the left

423 Credits Available

<span class="slds-badge">
  <span class="slds-badge__icon slds-badge__icon_left">
    <span class="slds-icon_container slds-icon-utility-moneybag slds-current-color" title="Description of icon when needed">

Base: Icon on the right

423 Credits Available

<span class="slds-badge">423 Credits Available<span class="slds-badge__icon slds-badge__icon_right">
    <span class="slds-icon_container slds-icon-utility-moneybag slds-current-color" title="Description of icon when needed">
      <svg class="slds-icon slds-icon_xx-small" aria-hidden="true">

423 Credits Available

<span class="slds-badge slds-badge_lightest">
  <span class="slds-badge__icon slds-badge__icon_left">
    <span class="slds-icon_container slds-icon-utility-moneybag slds-current-color" title="Description of icon when needed">

423 Credits Available

<span class="slds-badge slds-badge_lightest">423 Credits Available<span class="slds-badge__icon slds-badge__icon_right">
    <span class="slds-icon_container slds-icon-utility-moneybag slds-current-color" title="Description of icon when needed">
      <svg class="slds-icon slds-icon_xx-small" aria-hidden="true">

When using inverse themed badges, add the slds-badge__icon_inverse class to slds-badge__icon to inverse the icon.

Icon on the left

423 Credits Available

<span class="slds-badge slds-badge_inverse">
  <span class="slds-badge__icon slds-badge__icon_left slds-badge__icon_inverse">
    <span class="slds-icon_container slds-icon-utility-moneybag slds-current-color" title="Description of icon when needed">

Icon on the right

423 Credits Available

<span class="slds-badge slds-badge_inverse">423 Credits Available<span class="slds-badge__icon slds-badge__icon_right slds-badge__icon_inverse">
    <span class="slds-icon_container slds-icon-utility-moneybag slds-current-color" title="Description of icon when needed">
      <svg class="slds-icon slds-icon_xx-small" aria-hidden="true">

Badges with Nested Elements

Along with icons, you can have nested textual elements, such as strong, em, and span elements, within a badge. Only inline and inline-block elements are supported at this time.

Component In: Lightning

<span class="slds-badge">Component In: <em>Lightning</em>
</span>