Badges
Badge generates a small badge to the top-right of its child(ren).
Simple Badges
Examples of badges containing text, using primary and secondary colors. The badge is applied to its children.
Dot Badge
The dot
property changes a badge into a small dot. This can be used as a notification that something has changed without giving a count.
Badge visibility
The visibility of badges can be controlled using the invisible
property.
The badge auto hides with badgeContent is zero. You can override this with the showZero
property.
Customized Badge
If you have been reading the overrides documentation page but you are not confident jumping in, here is one example of how you can change the badge position.
⚠️ While the material design specification encourages theming, this example is off the beaten path.