The most common use-case for a badge is to be displayed on a button indicating the number of new alerts for a user. This package exports a nice wrapper component named the BadgedButton which will default to rendering as a icon button with a notification FontIcon and an aria-label="Notifications".

The default behavior of the Badge is to not render when the children are 0 or null since it normally isn't helpful to display an "empty" badge. This behavior can be disabled by using the disableNullOnZero prop.

Just like other components within react-md, the Badge component comes with a few themes:

• primary - the theme primary color
• secondary - the theme secondary color
• default - the default theme for the tooltip
• clear - an "unstyled" theme

Tooltips can also be integrated with a Badge to show additional information about these notifications as well. Unfortunately there isn't a component included in react-md at this time to do this, but it can easily be created using the useTooltip hook and the BadgedButton component.

Badges do not need to always be rendered with a Button and can be used as supplementary text for any other element. To create a custom badge, you can use the BadgeContainer and Badge components directly instead of the BadgedButton.

The BadgeContainer is just a simple wrapper that will add display: inline-flex and position: relative so that the Badge can be displayed relative to the other children. You can also update some of the css variables for the badge to add additional offset to the container element or increase the font-size as needed.

You don't need custom components for updating the theme. It just tied together with the custom components section so it was added here. The custom theme can be applied by adding a new className to the BadgedButton and using the rmd-badge-theme-update-var mixin as well.