Badge
Badges are used to draw attention and display statuses or counts.
<pc-badge>Badge</pc-badge>Demos
Appearances
Set the appearance attribute to change the badge’s appearance.
Rounded badges
Use the rounded attribute to give the badge a rounded rectangle shape.
Pulsating badges
Use the pulse attribute to draw attention to the badge with a subtle animation.
With menu items
When including badges in menu items, use the suffix slot to make sure they’re aligned correctly.
Properties
| Name | Description | Reflects | Default |
|---|---|---|---|
appearance | The badge’s appearance. "primary"
| "success"
| "neutral"
| "warning"
| "danger" | "primary" | |
rounded | Gives the badge a rounded rectangle shape. boolean | false | |
pulse | Makes the badge pulsate to draw attention. boolean | false | |
updateComplete | A read‐only promise that resolves when the component has finished updating. | - |
Learn more about attributes and properties.
Slots
| Name | Description |
|---|---|
| (default) | The badge’s content. |
Learn more about using slots.
Parts
| Name | Description |
|---|---|
base | The component’s base wrapper. |
Learn more about customising CSS parts.
Importing
If you’re using the autoloader or the standard loader, you can ignore this section. If you’re cherry picking, you can use any of the following snippets to import this component.
To import this component from the CDN with a script tag, copy this snippet and paste it in your HTML.
<script type="module" src="https://cdn.jsdelivr.net/npm/placer-toolkit@0.5.1/dist/components/badge/badge.js"></script>To import this component from the CDN using a JavaScript import, copy this snippet and paste it in your JavaScript:
import "https://cdn.jsdelivr.net/npm/placer-toolkit@0.5.1/dist/components/badge/badge.js";To import this component with a bundler using a JavaScript import, copy this snippet and paste it in your JavaScript:
import "placer-toolkit/dist/components/badge/badge.js";