homerocket_launch
apps Browse all smart_button Buttons horizontal_rule Divider list List style Cards dock_to_left Navigation Rail bottom_navigation Navigation Bar toggle_on Switches radio_button_checked Radio Buttons check_box Checkboxes linear_scale Sliders text_fields Text Fields label Chips chat_bubble Dialog info Tooltip badge Badge hourglass_empty Progress tab Tabs search Search Bar arrow_split Split Button menu Menu progress_activity Loading Indicator add_circle FAB Menu smart_button Icon Button web_asset Top App Bar notifications Snackbar
persondark_modesettings
Component reference

Badge

Material 3 Expressive Badge component for conveying dynamic information like counts or status.

Material 3Web ComponentFramework agnostic

Dot Badge

mailnotifications
<m3-badge><span class="material-symbols-outlined">mail</span></m3-badge>

Labeled Badge

mailnotifications
<m3-badge label="3"><span class="material-symbols-outlined">notifications</span></m3-badge>
apps Browse all smart_button Buttons horizontal_rule Divider list List style Cards dock_to_left Navigation Rail bottom_navigation Navigation Bar toggle_on Switches radio_button_checked Radio Buttons check_box Checkboxes linear_scale Sliders text_fields Text Fields label Chips chat_bubble Dialog info Tooltip badge Badge hourglass_empty Progress tab Tabs search Search Bar arrow_split Split Button menu Menu progress_activity Loading Indicator add_circle FAB Menu smart_button Icon Button web_asset Top App Bar notifications Snackbar
homerocket_launchpersonsettings