Skip to table of contents Badge
<pc-badge> 0.1.0 experimental Badges are used to draw attention and display statuses or counts.
<pc-badge>Badge</pc-badge>
Use the appearance attribute to set the badge’s appearance.
<pc-badge appearance="primary">Primary</pc-badge>
<pc-badge appearance="success">Success</pc-badge>
<pc-badge appearance="neutral">Neutral</pc-badge>
<pc-badge appearance="warning">Warning</pc-badge>
<pc-badge appearance="danger">Danger</pc-badge>
Use the variant attribute to set the badge’s variant.
<div style="margin-block-end: var(--pc-spacing-m)">
<pc-badge appearance="primary" variant="accent">Accent</pc-badge>
<pc-badge appearance="primary" variant="filled outlined">F + O</pc-badge>
<pc-badge appearance="primary" variant="filled">Filled</pc-badge>
<pc-badge appearance="primary" variant="outlined">Outlined</pc-badge>
<pc-badge appearance="primary" variant="plain">Plain</pc-badge>
</div>
<div style="margin-block-end: var(--pc-spacing-m)">
<pc-badge appearance="success" variant="accent">Accent</pc-badge>
<pc-badge appearance="success" variant="filled outlined">F + O</pc-badge>
<pc-badge appearance="success" variant="filled">Filled</pc-badge>
<pc-badge appearance="success" variant="outlined">Outlined</pc-badge>
<pc-badge appearance="success" variant="plain">Plain</pc-badge>
</div>
<div style="margin-block-end: var(--pc-spacing-m)">
<pc-badge appearance="neutral" variant="accent">Accent</pc-badge>
<pc-badge appearance="neutral" variant="filled outlined">F + O</pc-badge>
<pc-badge appearance="neutral" variant="filled">Filled</pc-badge>
<pc-badge appearance="neutral" variant="outlined">Outlined</pc-badge>
<pc-badge appearance="neutral" variant="plain">Plain</pc-badge>
</div>
<div style="margin-block-end: var(--pc-spacing-m)">
<pc-badge appearance="warning" variant="accent">Accent</pc-badge>
<pc-badge appearance="warning" variant="filled outlined">F + O</pc-badge>
<pc-badge appearance="warning" variant="filled">Filled</pc-badge>
<pc-badge appearance="warning" variant="outlined">Outlined</pc-badge>
<pc-badge appearance="warning" variant="plain">Plain</pc-badge>
</div>
<div>
<pc-badge appearance="danger" variant="accent">Accent</pc-badge>
<pc-badge appearance="danger" variant="filled outlined">F + O</pc-badge>
<pc-badge appearance="danger" variant="filled">Filled</pc-badge>
<pc-badge appearance="danger" variant="outlined">Outlined</pc-badge>
<pc-badge appearance="danger" variant="plain">Plain</pc-badge>
</div>
Use the rounded attribute to give the badge a rounded rectangle shape.
<pc-badge appearance="primary" rounded>Primary</pc-badge>
<pc-badge appearance="success" rounded>Success</pc-badge>
<pc-badge appearance="neutral" rounded>Neutral</pc-badge>
<pc-badge appearance="warning" rounded>Warning</pc-badge>
<pc-badge appearance="danger" rounded>Danger</pc-badge>
Use the pulse attribute to draw attention to the badge with a subtle animation.
<div class="badge-pulse">
<pc-badge appearance="primary" pulse>1</pc-badge>
<pc-badge appearance="success" pulse>1</pc-badge>
<pc-badge appearance="neutral" pulse>1</pc-badge>
<pc-badge appearance="warning" pulse>1</pc-badge>
<pc-badge appearance="danger" pulse>1</pc-badge>
</div>
<style>
.badge-pulse pc-badge:not(:last-of-type) {
margin-inline-end: var(--pc-spacing-l);
}
</style>
| Name | Description | Reflects | Default |
|---|
appearance | The badge’s appearance.
Type: "primary"
| "success"
| "neutral"
| "warning"
| "danger" |
| "primary" |
variant | The badge’s variant.
Type: "accent" | "filled" | "outlined" |
| "accent" |
rounded | Gives the badge a rounded rectangle shape.
Type: boolean |
| false |
pulse | Makes the badge pulsate to draw attention.
Type: boolean |
| false |
updateComplete |
A read‐only promise that resolves when
the component has
finished updating.
| | ‐ |
Learn more about customising animations.
| Name | Description |
|---|
| (default) | The badge’s content. |
Learn more about using slots.
If you’re using the autoloader or the standard loader,
you can skip this section. But if you’re cherry picking,
you can use any of the following snippets to import this component.
CDN (script tag)CDN (import)npm (import)
To manually import this component from the CDN,
copy this code snippet and paste it in your HTML.
<script type="module" src="https://cdn.jsdelivr.net/npm/placer-toolkit@1.0.0-alpha.3/cdn/components/badge/badge.js"></script>
To manually import this component from the CDN, copy
this code snippet and paste it in your JavaScript file.
import "https://cdn.jsdelivr.net/npm/placer-toolkit@1.0.0-alpha.3/cdn/components/badge/badge.js";
To manually import this component from npm, copy this
code snippet and paste it in your JavaScript file.
import "placer-toolkit/dist/components/badge/badge.js";