Badge

A lightning-badge component 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.

You can create two types of badges.

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

Here is an example of a text-only badge.

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

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

lightning-badge implements the badge blueprint in the Salesforce Lightning Design System (SLDS).

Visit icons to view the available icons.

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

To apply additional styling, use the SLDS utility classes with the class attribute.

Change the badge color using an SLDS class. See colors for more information.

This example creates a green badge using the slds-theme_success SLDS class.

Component styling hooks use the --slds-c-* prefix and change styling for specific elements or properties of a component. Component-specific styling isn’t recommended, because it’s unsupported for SLDS 2, but existing customizations still work with the original SLDS. If you use component styling hooks, limit the components to SLDS themes until SLDS 2 and the Salesforce Cosmos theme become generally available. See Badges: Styling Hooks Overview for documentation on component-specific hooks for this component.

For more information, see Style Components Using Lightning Design System Styling Hooks in the Lightning Web Components Developer Guide.

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