Skip to main content

Badges

Please refer to MUI's official docs for more details on component's usage guide and API documentation.

Basic Badges

Use badgeContent prop for the text inside the badge and color prop for different colors of a badge.

User Avatar
4
User Avatar
4
User Avatar
4
User Avatar
4
User Avatar
4
User Avatar
4


Dot Badges

Use variant='dot' prop for dot badges.

User Avatar
User Avatar

Typography



Badge Alignment

Use anchorOrigin prop to move the badge to any corner of the wrapped element.

User Avatar
User Avatar
User Avatar
User Avatar


Maximum Value

Use max prop to cap the value of the badge content.

User Avatar
99
User Avatar
99+
User Avatar
999+


Badge Overlap

Use overlap prop to place the badge relative to the corner of the wrapped element.

User Avatar
User Avatar
User Avatar
User Avatar


Badge visibility

The visibility of badges can be controlled using invisible prop.

User Avatar
1
User Avatar


Custom Tonal Badges

The visibility of badges can be controlled using invisible prop.

User Avatar
4
User Avatar
4
User Avatar
4
User Avatar
4
User Avatar
4
User Avatar
4