Skip to content

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.

410

Typography

4
4

Maximum Value

You can use the max property to cap the value of the badge content.

9999+999+

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.

Typography

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.

4

00

Customized badges

Here is an example of customizing the component. You can learn more about this in the overrides documentation page.