3.0.0-alpha.12 Alpha
Components

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.

A+O Accent F+O Filled Outlined
A+O Accent F+O Filled Outlined
A+O Accent F+O Filled Outlined
A+O Accent F+O Filled Outlined
A+O Accent F+O Filled Outlined 
<div style="margin-block-end: 1rem;">
  <wa-badge appearance="accent outlined" variant="neutral">A+O</wa-badge>
  <wa-badge appearance="accent" variant="neutral">Accent</wa-badge>
  <wa-badge appearance="filled outlined" variant="neutral">F+O</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 outlined" variant="brand">A+O</wa-badge>
  <wa-badge appearance="accent" variant="brand">Accent</wa-badge>
  <wa-badge appearance="filled outlined" variant="brand">F+O</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 outlined" variant="success">A+O</wa-badge>
  <wa-badge appearance="accent" variant="success">Accent</wa-badge>
  <wa-badge appearance="filled outlined" variant="success">F+O</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 outlined" variant="warning">A+O</wa-badge>
  <wa-badge appearance="accent" variant="warning">Accent</wa-badge>
  <wa-badge appearance="filled outlined" variant="warning">F+O</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 outlined" variant="danger">A+O</wa-badge>
  <wa-badge appearance="accent" variant="danger">Accent</wa-badge>
  <wa-badge appearance="filled outlined" variant="danger">F+O</wa-badge>
  <wa-badge appearance="filled" variant="danger">Filled</wa-badge>
  <wa-badge appearance="outlined" variant="danger">Outlined</wa-badge>
</div>

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>

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">
  <wa-badge variant="brand" pill pulse>1</wa-badge>
  <wa-badge variant="success" pill pulse>1</wa-badge>
  <wa-badge variant="neutral" pill pulse>1</wa-badge>
  <wa-badge variant="warning" pill pulse>1</wa-badge>
  <wa-badge variant="danger" pill pulse>1</wa-badge>
</div>

<style>
  .badge-pulse 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>

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 
<wa-menu style="max-width: 240px;">
  <wa-menu-label>Messages</wa-menu-label>
  <wa-menu-item>Comments <wa-badge slot="suffix" variant="neutral" pill>4</wa-badge></wa-menu-item>
  <wa-menu-item>Replies <wa-badge slot="suffix" variant="neutral" pill>12</wa-badge></wa-menu-item>
</wa-menu>

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' | 'inherit'
Default 'inherit'
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
pulse
pulse
Makes the badge pulsate to draw attention.
Type boolean
Default false

CSS custom properties

Learn more about CSS custom properties.

Name Description
--background-color
The badge's background color.
--border-color
The color of the badge's border.
--border-radius
The radius of the badge's corners.
--border-style
The style of the badge's border.
--border-width
The width of the badge's border.
--text-color
The color of the badge's content.

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/webawesome@3.0.0-alpha.12/dist/components/badge/badge.js';
Coming soon! Coming soon!
    No results