<wa-badge>
Badges are used to draw attention and display statuses or counts.
<wa-badge>Badge</wa-badge>
Set the variant attribute to change the badge's variant.
<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>
Use the pill attribute to give badges rounded edges.
<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>
Use the pulse attribute to draw attention to the badge with a subtle animation.
<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>
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.
<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>
When including badges in menu items, use the suffix slot to make sure they're aligned correctly.
<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>
| Name | Description |
|---|---|
| (default) | The badge's content. |
| Name | Description | Reflects | |
|---|---|---|---|
variantvariant
|
The badge's theme variant.
Type
'brand' | 'success' | 'neutral' | 'warning' | 'danger'
Default
'brand'
|
|
|
pillpill
|
Draws a pill-style badge with rounded edges.
Type
boolean
Default
false
|
|
|
pulsepulse
|
Makes the badge pulsate to draw attention.
Type
boolean
Default
false
|
|
| 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.
|
--content-color |
The color of the badge's content.
|
| Name | Description |
|---|---|
base |
The component's base wrapper. |
The autoloader is the recommended way to import components. If you prefer to do it manually, use one of the following code snippets.
To manually import this component from the CDN, use the following code.
import 'https://early.webawesome.com/webawesome@3.0.0-alpha.4/dist/components/badge/badge.js';