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
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
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>
0.0.00.0.00.0.00.0.00.0.0
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
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' | determine the visual status state |
Attributes
| Name | Types | Description |
|---|
status | 'accent' | 'success' | 'warning' | 'danger' | determine the visual status state |
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 |