Badge

<sl-badge> | SlBadge
Since 2.0 stable

Badges are used to draw attention and display statuses or counts.

Badge 
<sl-badge>Badge</sl-badge>

Examples

Variants

Set the variant attribute to change the badge’s variant.

Primary Success Neutral Warning Danger 
<sl-badge variant="primary">Primary</sl-badge>
<sl-badge variant="success">Success</sl-badge>
<sl-badge variant="neutral">Neutral</sl-badge>
<sl-badge variant="warning">Warning</sl-badge>
<sl-badge variant="danger">Danger</sl-badge>

Pill Badges

Use the pill attribute to give badges rounded edges.

Primary Success Neutral Warning Danger 
<sl-badge variant="primary" pill>Primary</sl-badge>
<sl-badge variant="success" pill>Success</sl-badge>
<sl-badge variant="neutral" pill>Neutral</sl-badge>
<sl-badge variant="warning" pill>Warning</sl-badge>
<sl-badge variant="danger" pill>Danger</sl-badge>

Pulsating Badges

Use the pulse attribute to draw attention to the badge with a subtle animation.

1 1 1 1 1 
<div class="badge-pulse">
  <sl-badge variant="primary" pill pulse>1</sl-badge>
  <sl-badge variant="success" pill pulse>1</sl-badge>
  <sl-badge variant="neutral" pill pulse>1</sl-badge>
  <sl-badge variant="warning" pill pulse>1</sl-badge>
  <sl-badge variant="danger" pill pulse>1</sl-badge>
</div>

<style>
  .badge-pulse sl-badge:not(:last-of-type) {
    margin-right: 1rem;
  }
</style>

With Buttons

One of the most common use cases for badges is attaching them to buttons. To make this easier, badges will be automatically positioned at the top-right when they’re a child of a button.

Requests 30 Warnings 8 Errors 6 
<sl-button>
  Requests
  <sl-badge pill>30</sl-badge>
</sl-button>

<sl-button style="margin-inline-start: 1rem;">
  Warnings
  <sl-badge variant="warning" pill>8</sl-badge>
</sl-button>

<sl-button style="margin-inline-start: 1rem;">
  Errors
  <sl-badge variant="danger" pill>6</sl-badge>
</sl-button>

With Menu Items

When including badges in menu items, use the suffix slot to make sure they’re aligned correctly.

Messages Comments 4 Replies 12 
<sl-menu style="max-width: 240px;">
  <sl-menu-label>Messages</sl-menu-label>
  <sl-menu-item>Comments <sl-badge slot="suffix" variant="neutral" pill>4</sl-badge></sl-menu-item>
  <sl-menu-item>Replies <sl-badge slot="suffix" variant="neutral" pill>12</sl-badge></sl-menu-item>
</sl-menu>

Slots

Name Description
(default) The badge’s content.

Learn more about using slots.

Properties

Name Description Reflects Type Default
variant The badge’s theme variant. 'primary' | 'success' | 'neutral' | 'warning' | 'danger' 'primary'
pill Draws a pill-style badge with rounded edges. boolean false
pulse Makes the badge pulsate to draw attention. boolean false
updateComplete A read-only promise that resolves when the component has finished updating.

Learn more about attributes and properties.

Parts

Name Description
base The component’s base wrapper.

Learn more about customizing CSS parts.