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.

MDUIDocsEnglish简体中文LightDarkSystem
Preset Colors
Custom Color
Extract Color from Wallpaper
Select a Wallpaper
Getting Started
Introduction Installation Usage TypeScript Support IDE Support Localization Frequently Asked Questions
Styles
Dark Theme Dynamic Theme Typography Design Tokens
Frameworks
React Vue Angular
Components
Button ButtonIcon Fab SegmentedButton Chip Card Checkbox Radio Switch Slider RangeSlider List Collapse Tabs Dropdown Menu Select TextField LinearProgress CircularProgress Dialog Divider Avatar Badge Icon Tooltip Snackbar NavigationBar NavigationDrawer NavigationRail BottomAppBar TopAppBar Layout
Functions
JavaScript Library dialog alert confirm prompt snackbar getTheme setTheme getColorFromImage setColorScheme removeColorScheme loadLocale setLocale getLocale throttle observeResize breakpoint
Libraries
@mdui/icons