Badge

Badges provide dynamic information, such as counts or status indications. They can contain labels or numbers.

Usage

Import the component:

import 'mdui/components/badge.js';

Import the TypeScript type:

import type { Badge } from 'mdui/components/badge.js';

example:

<mdui-badge>12</mdui-badge>

The variant attribute determines the badge's shape. A large value creates a larger badge. Specify the content to display within the default slot.

99+

<mdui-badge variant="small"></mdui-badge>
<mdui-badge variant="large">99+</mdui-badge>

Code

Attribute Property Reflect Type Default

variant variant 'small' | 'large' 'large'

Attribute	Property	Reflect	Type	Default
`variant`	`variant`		`'small' \| 'large'`	`'large'`
Defines the badge shape. Possible values: `small`: A small badge without text. `large`: A large badge with displayed text.

Defines the badge shape. Possible values:

Name
(default)
The text to be displayed.

Name
`--shape-corner`
The size of the component corner. You can use a specific pixel value, but it's recommended to reference design tokens.

Avatar

Up Next

Icon