Badge
Material Design 3 badge web component (small dot or large numeric/text badge).
- 1.1 KB gzipped
- @lit-material/badge 0.0.3
- Renders on the server
Example
Badge
Small dot or large numeric/text badge, typically overlaid on a corner of another element.
Markup
<lit-material-badge ></lit-material-badge>
Clamped value
Install
npm install @lit-material/badge @lit-material/tokensimport "@lit-material/badge";Link @lit-material/tokens/css/index.css once per page for the colour, type and shape tokens. Install guide
API
<lit-material-badge>
Material Design 3 badge — a small status indicator, typically overlaid on a corner of another element (an icon, an avatar, a nav item) to flag a notification count or unread state.
Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
value | value | BadgeValue | undefined | none | A number (clamped by max) or arbitrary text. Unset renders the small dot. |
max | max | number | 99 | Above this, a numeric value displays as "{max}+" instead of the exact number. |
label | label | string | undefined | none | Accessible name for a standalone badge. See the class docs for when to use this. |
CSS parts
| Part | Description |
|---|---|
badge | The badge's visible surface. |