Badge

npm1.8.3

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>

Long Form

0.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

// 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'`

Attributes

Name	Types	Description
`status`	`'accent' \| 'success' \| 'warning' \| 'danger'`

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