API REFERENCE · DATA DISPLAY
<dj-badge>
A small count or status label that decorates other content.
Put the content in the default slot. Set variant for the color and pill for fully rounded ends.
npm install @dojo-ng/badge
import "@dojo-ng/badge";Accessibility
- A badge is presentational and has no ARIA role.
- When a badge shows a count for a control, such as an unread count on a button, put the accessible name on the control, not on the badge:
aria-label="Notifications, 4 unread". Assistive technology then reads the meaning, not a bare number.
Colors
- Each variant uses the theme's semantic
--dj-color-*-600scale. - To change one badge, set
--dj-badge-backgroundand--dj-badge-coloron it.
Content is the default slot.
Properties
| Property | Attribute | Type | Default |
|---|---|---|---|
variantSemantic color. Reflected so :host([variant="…"]) and page CSS can target it. |
variant reflected |
"neutral""info""success""warning""danger" |
"neutral" |
pillFully rounded (pill) shape instead of the default small radius. |
pill reflected |
boolean |
false |
Slots
Default slot
CSS parts
Style these with dj-badge::part(name).
| Part | Description |
|---|---|
base | the badge box |
CSS custom properties
| Property | Default | Description |
|---|---|---|
--dj-badge-background | per-variant semantic color | Background fill; defaults to the variant's --dj-color-*-600 scale. |
--dj-badge-color | var(--dj-color-neutral-0) | Text color. |
--dj-badge-radius | var(--dj-input-border-radius-small) | Corner radius (ignored when pill is set). |
--dj-badge-font-size | 0.75rem | Badge text size. |