Badge

<wa-badge>

Stable

modified

Badges draw attention to adjacent content by displaying a status, count, or label. This subclass adds the Yoummday badge palette and sizing to Web Awesome's badge behavior.

New

<wa-badge>New</wa-badge>

Featured

<wa-badge variant="brand">
  <wa-icon slot="start" name="star"></wa-icon>
  Featured
  <wa-icon slot="end" name="arrow-right"></wa-icon>
</wa-badge>

Examples

Link to This Section

Variant

Link to This Section

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

Link to This Section

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

Link to This Section

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

Extra Small
Small
Medium
Large
Extra Large

                  
                

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

Pill

Link to This Section

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

Link to This Section

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

<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>

Set the --pulse-color custom property to color the pulse independently of the badge's variant.

<wa-badge variant="neutral" attention="pulse" pill style="--pulse-color: var(--wa-color-brand-fill-loud)">1</wa-badge>

Start & End Decorations

Link to This Section

Use the start and end slots to add presentational elements like <wa-icon> alongside the badge's label.

  
  Start

  End

  Both

<wa-badge>
  <wa-icon slot="start" name="seedling"></wa-icon>
  Start
</wa-badge>
<wa-badge>
  <wa-icon slot="end" name="tree"></wa-icon>
  End
</wa-badge>
<wa-badge>
  <wa-icon slot="start" name="cow"></wa-icon>
  <wa-icon slot="end" name="meteor"></wa-icon>
  Both
</wa-badge>

With Buttons

Link to This Section

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 appearance="filled">
  Requests
  <wa-badge pill>30</wa-badge>
</wa-button>

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

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

Yoummday Extensions

Link to This Section

The Yoummday badge extends Web Awesome's variants with additional product colors and an indicator gradient. It also uses compact, token-based sizing across all variants.

Yoummday Variants

Link to This Section

Use the additional Yoummday variants when a badge needs one of the established product colors.

  Light
  Info
  Dark
  Lotus Light
  Gray Light
  Lotus
  Blue
  Gray
  Purple Light
  Green Light
  Green Mint
  Salmon
  Beige
  Cyan Light
  Pink Light
  Yellow Light
  Purple Dark
  Blue Light
  Teal Light
  Gray 2
  Brand Light

                  
                

<div class="yoummday-badge-variants">
  <wa-badge variant="light">Light</wa-badge>
  <wa-badge variant="info">Info</wa-badge>
  <wa-badge variant="dark">Dark</wa-badge>
  <wa-badge variant="lotuslight">Lotus Light</wa-badge>
  <wa-badge variant="graylight">Gray Light</wa-badge>
  <wa-badge variant="lotus">Lotus</wa-badge>
  <wa-badge variant="blue">Blue</wa-badge>
  <wa-badge variant="gray">Gray</wa-badge>
  <wa-badge variant="purplelight">Purple Light</wa-badge>
  <wa-badge variant="greenlight">Green Light</wa-badge>
  <wa-badge variant="greenmint">Green Mint</wa-badge>
  <wa-badge variant="salmon">Salmon</wa-badge>
  <wa-badge variant="beige">Beige</wa-badge>
  <wa-badge variant="cyanlight">Cyan Light</wa-badge>
  <wa-badge variant="pinklight">Pink Light</wa-badge>
  <wa-badge variant="yellowlight">Yellow Light</wa-badge>
  <wa-badge variant="purpledark">Purple Dark</wa-badge>
  <wa-badge variant="bluelight">Blue Light</wa-badge>
  <wa-badge variant="teallight">Teal Light</wa-badge>
  <wa-badge variant="gray2">Gray 2</wa-badge>
  <wa-badge variant="brandlight">Brand Light</wa-badge>
</div>

<style>
  .yoummday-badge-variants {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--wa-space-xs);
  }
</style>

Indicator

Link to This Section

Use variant="indicator" to display a gradient status. Set --indicator-percent from 0% to 100% to control the gradient position.

<wa-badge variant="indicator">0%</wa-badge>
<wa-badge variant="indicator" style="--indicator-percent: 25%">25%</wa-badge>
<wa-badge variant="indicator" style="--indicator-percent: 50%">50%</wa-badge>
<wa-badge variant="indicator" style="--indicator-percent: 75%">75%</wa-badge>
<wa-badge variant="indicator" style="--indicator-percent: 100%">100%</wa-badge>

Yoummday Sizing

Link to This Section

Unlike the upstream badge's relative sizing, the Yoummday badge uses the design-system tokens for extra-small text, normal line height, compact padding, and a small border radius. Icons in the start and end slots use the large font size token.

API

Link to This Section

Importing

Link to This Section

If you're using the autoloader or a hosted project, components load on demand — no manual import needed. To cherry-pick a component manually, use one of the following snippets.

CDN

npm

Self-Hosted

React

Import this component directly from the CDN:

import 'https://cdn.yoummday.com/packages/@yoummday/webawesome/0.5.1/dist/components/badge/badge.js';

After installing Web Awesome via npm, import this component:

import '@yoummday/webawesome/dist/components/badge/badge.js';

If you're self-hosting Web Awesome, import this component from your server:

import './webawesome/dist/components/badge/badge.js';

To import this component for React 18 or below, use the following code:

import YoummdayBadge from '@yoummday/webawesome/dist/react/badge/index.js';

Slots

Link to This Section

Learn more about using slots.

Name	Description
(default)	The badge's content.
`end`	An element, such as `<wa-icon>`, placed after the label.
`start`	An element, such as `<wa-icon>`, placed before the label.

Attributes & Properties

Link to This Section

Learn more about attributes and properties.

Name	Description	Reflects
`appearance` `appearance`	The badge's visual appearance. Type `'accent' \| 'filled' \| 'outlined' \| 'filled-outlined'` Default `'accent'`
`attention` `attention`	Adds an animation to draw attention to the badge. Type `'none' \| 'pulse' \| 'bounce'` Default `'none'`
`pill` `pill`	Draws a pill-style badge with rounded edges. Type `boolean` Default `false`
`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'`

CSS Custom Properties

Link to This Section

Learn more about CSS custom properties.

Name	Description
`--indicator-percent`	The gradient position when using `variant="indicator"`.
`--pulse-color`	The color of the badge's pulse effect when using `attention="pulse"`.

CSS Parts

Link to This Section

Learn more about CSS parts.

Name	Description	CSS selector
`badge`	The component's outer wrapper.	`::part(badge)`
`end`	The container that wraps the `end` slot.	`::part(end)`
`start`	The container that wraps the `start` slot.	`::part(start)`
`base`	Deprecated. Use the `badge` part instead.	`::part(base)`

Need a hand?

Report a bug

Ask for help

Badge

Examples

Variant

Appearance

Size

Pill

Drawing Attention

Start & End Decorations

With Buttons

Yoummday Extensions

Yoummday Variants

Indicator

Yoummday Sizing

API

Importing

Slots

Attributes & Properties

CSS Custom Properties

CSS Parts

Quick Links

Recent Searches