Badge

<sl-badge> | SlBadge
Since 1.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 Secondary Success Neutral Warning Danger 
<sl-badge variant="primary" icon>Primary</sl-badge>
<sl-badge variant="secondary">Secondary</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>

Outline badges

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

Primary Secondary Success Neutral Warning Danger 
<sl-badge variant="primary" outline>Primary</sl-badge>
<sl-badge variant="secondary" outline>Secondary</sl-badge>
<sl-badge variant="success" outline>Success</sl-badge>
<sl-badge variant="neutral" outline>Neutral</sl-badge>
<sl-badge variant="warning" outline>Warning</sl-badge>
<sl-badge variant="danger" outline>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>

Pill badges outline

Use the pill and outline attribute to give badges rounded edges in outline.

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

Badges with icons

Use the icon slots to add icons.

Settings Settings Settings Settings Settings Settings 

<sl-badge variant="primary" icon>
  <sl-icon slot="prefix" name="gear"></sl-icon>
  Settings
</sl-badge>

<sl-badge variant="secondary" icon>
  <sl-icon slot="prefix" name="gear"></sl-icon>
  Settings
</sl-badge>

<sl-badge variant="success" icon>
  <sl-icon slot="prefix" name="gear"></sl-icon>
  Settings
</sl-badge>

<sl-badge variant="neutral" icon>
  <sl-icon slot="prefix" name="gear"></sl-icon>
  Settings
</sl-badge>

<sl-badge variant="warning" icon>
  <sl-icon slot="prefix" name="gear"></sl-icon>
  Settings
</sl-badge>

<sl-badge variant="danger" icon>
  <sl-icon slot="prefix" name="gear"></sl-icon>
  Settings
</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.
prefix A presentational prefix or similar element.

Learn more about using slots.

Properties

Name Description Reflects Type Default
variant The badge’s theme variant. 'primary' | 'secondary' | 'success' | 'neutral' | 'warning' | 'danger' 'primary'
pill Draws a pill-style badge with rounded edges. boolean false
outline Render the pill-style in outline mode 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.
content The badges content.
prefix The container that wraps the prefix.

Learn more about customizing CSS parts.

Dependencies

This component automatically imports the following dependencies.

  • <sl-icon>