The badge component is used to display a small amount of information, such as a count or status, in a compact and visually distinct way. It is often used to display notifications or unread messages.
Example
Displays numerical or text indicators to show counts, status, or labels.
code
<script type="module">
import '@blueprintui/components/include/badge.js';
</script>
<div bp-layout="inline gap:xs">
<bp-badge></bp-badge>
<bp-badge status="accent"></bp-badge>
<bp-badge status="success"></bp-badge>
<bp-badge status="warning"></bp-badge>
<bp-badge status="danger"></bp-badge>
</div>Number
Shows badges displaying numeric values with various status types.
code
<script type="module">
import '@blueprintui/components/include/badge.js';
</script>
<div bp-layout="inline gap:xs">
<bp-badge>10</bp-badge>
<bp-badge status="accent">10</bp-badge>
<bp-badge status="success">10</bp-badge>
<bp-badge status="warning">10</bp-badge>
<bp-badge status="danger">10</bp-badge>
</div>Long Form
Demonstrates badges with longer text content like version numbers.
code
<script type="module">
import '@blueprintui/components/include/badge.js';
</script>
<div bp-layout="inline gap:xs">
<bp-badge>0.0.0</bp-badge>
<bp-badge status="accent">0.0.0</bp-badge>
<bp-badge status="success">0.0.0</bp-badge>
<bp-badge status="warning">0.0.0</bp-badge>
<bp-badge status="danger">0.0.0</bp-badge>
</div>Install
NPM
// npm package
import '@blueprintui/components/include/badge.js';CDN
<script type="module">
import 'https://cdn.jsdelivr.net/npm/@blueprintui/components/include/badge.js/+esm';
</script>Accessibility
- Use a clear, descriptive supporting text or aria-label for the badge to communicates the information it is displaying.
- Use the appropriate badge status to indicate the severity.
- Avoid using the title attribute, as it is not read by screen readers.
bp-badge
Properties
| Name | Types | Description |
|---|---|---|
status | 'accent' | 'success' | 'warning' | 'danger' | Defines the visual status type of the badge, affecting its color and semantic meaning |
Attributes
| Name | Types | Description |
|---|---|---|
status | 'accent' | 'success' | 'warning' | 'danger' | Defines the visual status type of the badge, affecting its color and semantic meaning |
CSS Properties
| Name | Types | Description |
|---|---|---|
--background | ||
--color | ||
--font-size | ||
--width | ||
--height | ||
--min-width | ||
--min-height | ||
--border-radius | ||
--padding |
Slots
| Name | Types | Description |
|---|---|---|
default | badge content |