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
You can align the Badge in every corner of the container.
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.
The component itself does not provide any specific accessibility features. Please make sure that the content displayed in SfBadge component is meaningful and understandable by all users.