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.

1<template>
2    <lightning-badge label="Account Name"> </lightning-badge>
3</template>

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.

1<template>
2    <lightning-badge label="Account Name" icon-name="standard:account">
3    </lightning-badge>
4</template>

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

1<template>
2    <lightning-badge
3        label="Starred Accounts"
4        icon-name="custom:custom11"
5        icon-position="end"
6    >
7    </lightning-badge>
8</template>

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.

1<lightning-badge label="Approved" class="slds-theme_success"> </lightning-badge>

Component styling hooks provide CSS custom properties that use the --slds-c-* prefix and they change styling for specific elements or properties of a component. Component styling hooks are supported for SLDS 1 only. See the SLDS 1 component blueprints for available component styling hooks.

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.