Badge

<wa-badge> Since 2.0 stable

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

Badge 
<wa-badge>Badge</wa-badge>

Examples

Variants

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

Brand Success Neutral Warning Danger 
<wa-badge variant="brand">Brand</wa-badge>
<wa-badge variant="success">Success</wa-badge>
<wa-badge variant="neutral">Neutral</wa-badge>
<wa-badge variant="warning">Warning</wa-badge>
<wa-badge variant="danger">Danger</wa-badge>

Appearance

Use the appearance attribute to change the badge's visual appearance.

Accent Filled + Outlined Filled Outlined
Accent Filled + Outlined Filled Outlined
Accent Filled + Outlined Filled Outlined
Accent Filled + Outlined Filled Outlined
Accent Filled + Outlined Filled Outlined 
<div style="margin-block-end: 1rem;">
  <wa-badge appearance="accent" variant="neutral">Accent</wa-badge>
  <wa-badge appearance="filled outlined" variant="neutral">Filled + Outlined</wa-badge>
  <wa-badge appearance="filled" variant="neutral">Filled</wa-badge>
  <wa-badge appearance="outlined" variant="neutral">Outlined</wa-badge>
</div>
<div style="margin-block-end: 1rem;">
  <wa-badge appearance="accent" variant="brand">Accent</wa-badge>
  <wa-badge appearance="filled outlined" variant="brand">Filled + Outlined</wa-badge>
  <wa-badge appearance="filled" variant="brand">Filled</wa-badge>
  <wa-badge appearance="outlined" variant="brand">Outlined</wa-badge>
</div>
<div style="margin-block-end: 1rem;">
  <wa-badge appearance="accent" variant="success">Accent</wa-badge>
  <wa-badge appearance="filled outlined" variant="success">Filled + Outlined</wa-badge>
  <wa-badge appearance="filled" variant="success">Filled</wa-badge>
  <wa-badge appearance="outlined" variant="success">Outlined</wa-badge>
</div>
<div style="margin-block-end: 1rem;">
  <wa-badge appearance="accent" variant="warning">Accent</wa-badge>
  <wa-badge appearance="filled outlined" variant="warning">Filled + Outlined</wa-badge>
  <wa-badge appearance="filled" variant="warning">Filled</wa-badge>
  <wa-badge appearance="outlined" variant="warning">Outlined</wa-badge>
</div>
<div>
  <wa-badge appearance="accent" variant="danger">Accent</wa-badge>
  <wa-badge appearance="filled outlined" variant="danger">Filled + Outlined</wa-badge>
  <wa-badge appearance="filled" variant="danger">Filled</wa-badge>
  <wa-badge appearance="outlined" variant="danger">Outlined</wa-badge>
</div>

Size

Badges are sized relative to the current font size. You can set font-size on any badge (or an ancestor element) to change it.

Brand Brand Brand Brand Brand 
<wa-badge variant="brand" style="font-size: var(--wa-font-size-xs);">Brand</wa-badge>
<wa-badge variant="brand" style="font-size: var(--wa-font-size-s);">Brand</wa-badge>
<wa-badge variant="brand" style="font-size: var(--wa-font-size-m);">Brand</wa-badge>
<wa-badge variant="brand" style="font-size: var(--wa-font-size-l);">Brand</wa-badge>
<wa-badge variant="brand" style="font-size: var(--wa-font-size-xl);">Brand</wa-badge>

Pill Badges

Use the pill attribute to give badges rounded edges.

Brand Success Neutral Warning Danger 
<wa-badge variant="brand" pill>Brand</wa-badge>
<wa-badge variant="success" pill>Success</wa-badge>
<wa-badge variant="neutral" pill>Neutral</wa-badge>
<wa-badge variant="warning" pill>Warning</wa-badge>
<wa-badge variant="danger" pill>Danger</wa-badge>

Drawing Attention

Use the attention attribute to draw attention to the badge with a subtle animation. Supported effects are bounce, pulse and none.

1 1 1 1 1
1 1 1 1 1 
<div class="badge-attention">
  <wa-badge variant="brand" attention="pulse" pill>1</wa-badge>
  <wa-badge variant="success" attention="pulse" pill>1</wa-badge>
  <wa-badge variant="neutral" attention="pulse" pill>1</wa-badge>
  <wa-badge variant="warning" attention="pulse" pill>1</wa-badge>
  <wa-badge variant="danger" attention="pulse" pill>1</wa-badge>
</div>

<div class="badge-attention">
  <wa-badge variant="brand" attention="bounce" pill>1</wa-badge>
  <wa-badge variant="success" attention="bounce" pill>1</wa-badge>
  <wa-badge variant="neutral" attention="bounce" pill>1</wa-badge>
  <wa-badge variant="warning" attention="bounce" pill>1</wa-badge>
  <wa-badge variant="danger" attention="bounce" pill>1</wa-badge>
</div>

<style>
  .badge-attention {
    margin-block-end: var(--wa-space-m);

    wa-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 
<wa-button>
  Requests
  <wa-badge pill>30</wa-badge>
</wa-button>

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

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

Slots

Learn more about using slots.

Name Description
(default) The badge's content.

Attributes & Properties

Learn more about attributes and properties.

Name Description Reflects
variant
variant
The badge's theme variant. Defaults to brand if not within another element with a variant.
Type 'brand' | 'neutral' | 'success' | 'warning' | 'danger'
Default 'brand'
appearance
appearance
The badge's visual appearance.
Type 'accent' | 'filled' | 'outlined'
Default 'accent'
pill
pill
Draws a pill-style badge with rounded edges.
Type boolean
Default false
attention
attention
Makes the badge pulsate to draw attention.
Type 'none' | 'pulse'
Default 'none'

CSS parts

Learn more about CSS parts.

Name Description
base The component's base wrapper.

Importing

The autoloader is the recommended way to import components. If you prefer to do it manually, use one of the following code snippets.

CDN npm React

To manually import this component from the CDN, use the following code. 

import 'https://early.webawesome.com/[email protected]/dist/components/badge/badge.js';

To manually import this component from NPM, use the following code. 

import '@awesome.me/webawesome/dist/components/badge/badge.js';

To manually import this component from React, use the following code. 

import '@awesome.me/webawesome/dist/react/badge';
Need a hand? Report a bug Ask for help
    No results