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.

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.

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

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

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