MDUIDocsEnglish简体中文LightDarkSystem
Preset Colors
Custom Color
Extract Color from Wallpaper
Select a Wallpaper
Getting Started
Styles
Frameworks
Components
Avatar Badge BottomAppBar Button ButtonIcon Card Checkbox Chip CircularProgress Collapse Dialog Divider Dropdown Fab Icon Layout LinearProgress List Menu NavigationBar NavigationDrawer NavigationRail Radio RangeSlider Select SegmentedButton Slider Snackbar Switch Tabs TextField Tooltip TopAppBar
Functions
Libraries

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:

12
<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

Properties

AttributePropertyReflectTypeDefault
variantvariant'small' | 'large''large'

Defines the badge shape. Possible values:

  • small: A small badge without text.
  • large: A large badge with displayed text.

Slots

Name
(default)

The text to be displayed.

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