---
schema_version: "1"
id: a0eaa434f763dce1b798b15573f5f64c50075429cc78f5aae7611927d45c5aa1
title: Badge
collection: developer
version: current
locale: en-us
portal_url: https://docs.salesforce.com/developer/current/en-us/lightning-base-components/lightning-design-system/guides/lwc/components/lightning/badge/lightning-badge.md
canonical_url: https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lightning-badge.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: 802acf08d8bab0c357d3a0c98e56be186f9040ff2246e089a52e731f183cb7f0
products:
  - Lightning Component Reference
---

# 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

::::::tabset{tabs='["Example", "Develop", "Specifications"]'}

:::::tab

::component-playground{component="badge" model="lwc" namespace="lightning"}


:::::

:::::tab

A `lightning-badge` component is a label that holds small amounts of information. A
badge can show the status of unread notifications, or provide a label for 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 appears before or after the text

Here’s an example of a text-only badge.

<!-- prettier-ignore-start -->
```html
<template>
    <lightning-badge label="Account Name"> </lightning-badge>
</template>
```
<!-- prettier-ignore-end -->

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

<!-- prettier-ignore-start -->
```html
<template>
    <lightning-badge label="Account Name" icon-name="standard:account">
    </lightning-badge>
</template>
```
<!-- prettier-ignore-end -->

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

<!-- prettier-ignore-start -->
```html
<template>
    <lightning-badge
        label="Starred Accounts"
        icon-name="custom:custom11"
        icon-position="end"
    >
    </lightning-badge>
</template>
```
<!-- prettier-ignore-end -->

## Design

`lightning-badge` implements the badge blueprint in the Salesforce Lightning Design System (SLDS). The badge adapts to SLDS 1 or SLDS 2 styling based on the org's theme or the container app that you use.

|                | SLDS 1                                                                                                                                | SLDS 2                                                                                                          |
| :------------- | :------------------------------------------------------------------------------------------------------------------------------------ | :-------------------------------------------------------------------------------------------------------------- |
| **Design**     | [Badge](https://v1.lightningdesignsystem.com/components/badges/)                                                                      | [Badge](https://www.lightningdesignsystem.com/components/badges/)                                               |
| **For Use In** | Lightning Experience, Experience Builder sites, Salesforce mobile app, Lightning Out (Beta), Standalone Lightning app, Mobile Offline | [Lightning Experience](https://help.salesforce.com/s/articleView?id=xcloud.customize_ui_enhancedlex.htm&type=5) |

## Component Styling

Use a combination of icons and utility classes to style your badges.

### Icons

See the [SLDS icons](https://v1.lightningdesignsystem.com/icons) for available icons.

**note:** When applying SLDS classes or icons, check that they’re 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.

### Utility Classes

To apply additional styling, use the SLDS [utility classes](https://v1.lightningdesignsystem.com/utilities/alignment) with the `class` attribute.

Change the badge color by using an SLDS class.
See [colors](https://v1.lightningdesignsystem.com/components/badges/#Colors) for more information.

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

<!-- prettier-ignore-start -->
```html
<lightning-badge label="Approved" class="slds-theme_success"> </lightning-badge>
```
<!-- prettier-ignore-end -->

### Styling Hooks

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](https://v1.lightningdesignsystem.com/components/overview/) for available component styling hooks.

For more information, see [Style Components Using Lightning Design System Styling Hooks](https://developer.salesforce.com/docs/platform/lwc/guide/create-components-css-custom-properties) in the Lightning Web Components Developer Guide.


## Usage Considerations

Badges with nested elements are not supported. To create a label that contains links, use [`lightning-pill`](/docs/platform/lightning-component-reference/guide/lightning-pill.html) instead.


:::::

:::::tab
::component-specification{component="badge" model="lwc" namespace="lightning"}

:::::

::::::