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>
Examples
Variants
The variant
attribute determines the badge's shape. A large
value creates a larger badge. Specify the content to display within the default slot.
API
CSS Custom Properties
Name |
---|
--shape-corner |
The size of the component corner. You can use a specific pixel value, but it's recommended to reference design tokens. |
On this page