Vue Material -

Badge


by Creative Tim
Docs
Components
Premium themes
Home Getting Started
Configuration
Themes
Concepts Prebuilt Configuration Advanced Premium Themes
New
Custom Development
Work with Vue Router UI Elements
Elevation Layout Scrollbar Text Selection Typography
Components
App Avatar Badge Bottom Bar Button Card Content Datepicker Dialog Divider Drawer Empty State Forms
Autocomplete Checkbox Chips File Input & Textarea Radio Select Switch
Icon List Menu Progress
Bar Spinner
Snackbar Speed Dial Steppers Subheader Table Tabs Toolbar Tooltip
About License Old Version (0.8.1)
Vue material
Home Getting Started
Configuration
Themes
Concepts Prebuilt Configuration Advanced Premium Themes
New
Custom Development
Work with Vue Router UI Elements
Elevation Layout Scrollbar Text Selection Typography
Components
App Avatar Badge Bottom Bar Button Card Content Datepicker Dialog Divider Drawer Empty State Forms
Autocomplete Checkbox Chips File Input & Textarea Radio Select Switch
Icon List Menu Progress
Bar Spinner
Snackbar Speed Dial Steppers Subheader Table Tabs Toolbar Tooltip
About License Old Version (0.8.1)

Small status descriptors for UI elements.

Some components like button, avatar needs to be wrapped with md-badge component.

Example with buttons
1
1
2
Avatar
12
12
Example with lists
  • move_to_inbox Inbox
    6
  • send Sent Mail
  • delete Trash
    6
  • error Spam
    New
Dense
1
12

API - md-badge

The following option can be applied to any badge:

NameDescriptionDefault
md-content String, Number A content for badge
md-position String Position of badge top or bottom top
md-dense Boolean Enables the dense layout false