Badge
<wa-badge>
Badges draw attention to adjacent content by displaying a status, count, or label. Use them to highlight notifications, categorize items, or flag new activity.
Examples
Variants
Set the variant attribute to change the badge's variant.
Appearance
Use the appearance attribute to change the badge's visual appearance.
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.
Pill Badges
Use the pill attribute to give badges rounded edges.
Drawing Attention
Use the attention attribute to draw attention to the badge with a subtle animation. Supported effects are bounce, pulse and none.
Start & End Decorations
Use the start and end slots to add presentational elements like <wa-icon> alongside the badge's label.
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.
Importing
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.
Import this component directly from the CDN:
import 'https://ka-f.webawesome.com/[email protected]/components/badge/badge.js';
After installing Web Awesome via npm, import this component:
import '@awesome.me/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 WaBadge from '@awesome.me/webawesome/dist/react/badge/index.js';
Slots
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
Learn more about attributes and properties.
| Name | Description | Reflects | |
|---|---|---|---|
appearanceappearance |
The badge's visual appearance.
Type
'accent' | 'filled' | 'outlined' | 'filled-outlined'Default
'accent' |
|
|
attentionattention |
Adds an animation to draw attention to the badge.
Type
'none' | 'pulse' | 'bounce'Default
'none' |
|
|
css |
One or more CSSResultGroup to include in the component's shadow root. Host styles are automatically prepended.
Type
CSSResultGroup | undefinedDefault
[variantStyles, styles] |
||
pillpill |
Draws a pill-style badge with rounded edges.
Type
booleanDefault
false |
|
|
variantvariant |
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
Learn more about CSS custom properties.
| Name | Description |
|---|---|
--pulse-color |
The color of the badge's pulse effect when using
attention="pulse". |
CSS parts
Learn more about CSS parts.
| Name | Description | CSS selector |
|---|---|---|
base |
The component's base wrapper. |
::part(base)
|
end |
The container that wraps the end slot. |
::part(end)
|
start |
The container that wraps the start slot. |
::part(start)
|