Badge

lightning:badge

Represents a label which holds a small amount of information, such as the number of unread notifications.

For Aura components only. For LWC development, use lightning-badge.

For Use In

Lightning Experience, Experience Builder Sites, Salesforce Mobile App, Lightning Out (Beta), Standalone Lightning App, Mobile Offline

A lightning:badge is a label that holds small amounts of information. A badge can be used to display unread notifications, or to label a block of text. Badges don’t work for navigation because they can’t include a hyperlink.

This component implements styling from badges in the Lightning Design System.

You can create two types of badges.

A text-only badge
A badge with an icon that’s displayed before or after the text

Visit icons to view the available icons.

When applying Lightning Design System classes or icons, check that they are available in the Lightning Design System release tied to your org. The latest Lightning Design System resources become available only when the new release is available in your org.

Here is an example of a text-only badge.

1<aura:component>
2  <lightning:badge label="Account Name" />
3</aura:component>

To create a badge with an icon, set the iconName to a Lightning Design System icon. The icon is displayed before the text by default.

1<aura:component>
2  <lightning:badge label="Account Name" iconName="standard:account" />
3</aura:component>

To display the icon after the text, set iconPosition="end".

1<aura:component>
2  <lightning:badge
3    label="Starred Accounts"
4    iconName="custom:custom11"
5    iconPosition="end"
6  />
7</aura:component>

To display a color badge, use the Lightning Design System classes. See colors for more information.

Usage Considerations

Badges with nested elements are not supported. To create a label that can contain links, use lightning:pill instead.

Attributes

Name	Description	Type
body	The body of the component. In markup, this is everything in the body of the tag.	Aura.Component[]
class	A CSS class for the outer element, in addition to the component's base classes.	String
iconAlternativeText	The alternative text used to describe the icon, which is displayed as tooltip text.	String
iconName	The Lightning Design System name of the icon to be displayed inside the badge.	String
iconPosition	The position for the icon inside the badge. Valid values are 'start' (displayed before the text) and 'end' (displayed after the text).	String
label	The text to be displayed inside the badge.	String
title	Displays tooltip text when the mouse moves over the element.	String

Badge

Usage Considerations

Attributes

Lightning Component Reference

Contents