The Badge component is mostly useful for creating a notifications icon/button. It will place any content to be floating in the top right of the container. See the examples below for more information.

The main use case for the badge is to create a notification component. When the badge content is set to a number, it will automatically be truncated to max prop value. If the number is greater than the max, it will be displayed as `${max}+`. This is really only done to get the number within the bubble. The bubble size can be changed via Sass.

Even though the main use case of the badge is for notifications, you can also float any content. However, it will be up to you to position correctly with additional styles or class names.


This is an example of how you might want to use the Badge component to display notifications within you app. It links together with the Dialog component to display a list of new content that happened since the last visit.