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 controls the badge's shape. A large value creates a larger badge. Specify the content to display in the default slot.

99+

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

Source

Attribute Property Reflect Type Default

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

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

Defines the badge size. Possible values:

Name
(default)
The text to be displayed.

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

Avatar

BottomAppBar