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.
Simplelink
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.
Notification Dialog Examplelink
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.