Badge

lightning-badge

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

For Use In

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

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>

Component Styling 

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

Icons 

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.

Customize Component Styling 

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.

Usage Considerations 

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

Attributes 

NameDescriptionTypeDefaultRequired
icon-alternative-textThe alternative text used to describe the icon, which is displayed as tooltip text.string
icon-nameThe Lightning Design System name of the icon to be displayed inside the badge. Names are written in the format 'utility:down' where 'utility' is the category, and 'down' is the specific icon to be displayed.string
icon-positionThe position for the icon. Possible values: 'start' (displayed before the text) and 'end' (displayed after the text)stringstart
labelThe text to be displayed inside the badge.string