Badges
- HTML/CSS:Dev Ready
- Web Component:True
- Layout:Responsive
You are currently viewing a sandbox preview version of Spring ’20 | Go back to Summer ’20
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#
<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.
<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">
<svg class="slds-icon slds-icon_xx-small" aria-hidden="true"><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"><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">
<svg class="slds-icon slds-icon_xx-small" aria-hidden="true"><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.
<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">
<svg class="slds-icon slds-icon_xx-small" aria-hidden="true"><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.
<span class="slds-badge">Component In:
<em>Lightning</em>
</span>Overview of CSS Classes#
- Selector
- The CSS class being referred to.
- Summary
- A description of what the class does.
- Support
- Whether the class name is dev-ready (meaning it's fully vetted and tested and safe to use) or prototype (which means it's not fully vetted yet).
- Restrict
- The selector that the class name is allowed to be used on.
- Variant
- The base level pattern for a component. A variant can be extended to create another variant of that component, for example, a stateful button is a derivative of the base button.
- Modifier
- A single class that can be added to an HTML element of a component to modify its output. Typically these will be colors, sizing and positioning.
| Selector | .slds-badge |
|---|---|
| Summary | Create badge component |
| Support | dev-ready |
| Restrict | span |
| Variant | True |
| Selector | .slds-badge_inverse |
|---|---|
| Summary | Change badge color to a dark with light text |
| Restrict | .slds-badge |
| Modifier | True |
| Selector | .slds-badge_lightest |
|---|---|
| Summary | Change badge color to white with normal text |
| Restrict | .slds-badge |
| Modifier | True |
| Selector | .slds-badge__icon |
|---|---|
| Summary | Adds an icon to badge |
| Restrict | .slds-badge span |
| Modifier | True |
| Selector | .slds-badge__icon_inverse |
|---|---|
| Summary | Change badge icon fill color to inverse |
| Restrict | .slds-badge__icon |
| Modifier | True |
| Selector | .slds-badge__icon_left |
|---|---|
| Summary | Adds an icon to the left of the badge text |
| Restrict | .slds-badge__icon |
| Modifier | True |
| Selector | .slds-badge__icon_right |
|---|---|
| Summary | Adds an icon to the right of the badge text |
| Restrict | .slds-badge__icon |
| Modifier | True |
Badges Release Notes
2.11.5
- Added examples for communicating Success, Warning and Error states.
2.11.0
Changed
- Added
display: inline-flexandalign-items: centerto badge to center content vertically
2.8.0
Added
- Examples for all color variants with left and right aligned placement.
- Wrapping
slds-badge__iconelement to position and color icons.
Changed
- Increased font size to 12px, applied bold font weight, and removed uppercase styling in
.slds-badge.
2.7.0
Fixed
- Nested
inlineandinline-blockelements now receive the proper vertical alignment.