title | components |
---|---|
Badge React component |
Badge |
Badge generates a small badge to the top-right of its child(ren).
Examples of badges containing text, using primary and secondary colors. The badge is applied to its children.
{{"demo": "pages/components/badges/SimpleBadge.js"}}
Here is an example of customizing the component. You can learn more about this in the overrides documentation page.
{{"demo": "pages/components/badges/CustomizedBadges.js"}}
The visibility of badges can be controlled using the invisible
property.
{{"demo": "pages/components/badges/BadgeVisibility.js"}}
The badge auto hides with badgeContent is zero. You can override this with the showZero
property.
{{"demo": "pages/components/badges/ShowZeroBadge.js"}}
You can use the max
property to cap the value of the badge content.
{{"demo": "pages/components/badges/BadgeMax.js"}}
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.
{{"demo": "pages/components/badges/DotBadge.js"}}
You can use the overlap
property to place the badge relative to the corner of the wrapped element.
{{"demo": "pages/components/badges/BadgeOverlap.js"}}
You can use the horizontalAlignment
and verticalAlignment
properties to move the badge to any corner of the wrapped element.
{{"demo": "pages/components/badges/BadgeAlignment.js", "hideHeader": true}}