Basic usage

The badge component must be wrapped with a container that has class="relative". You must provide such a container by yourself, but it gives you the flexibility to put the badge wherever you want. Bagde comes with a "dot" variant, which hides the content. When given content is of type number (or string that could be parsed to number), you can set a maximum limit of that number using max prop.


You can align the Badge in every corner of the container.

Custom outline

A nifty effect that makes the Badge a bit more attractive is to add an outline that separates the Badge from an element.


A common use case for the Badge is to place it on a user's avatar.