Badge
Examples
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.
Placement
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.
Avatars
A common use case for the Badge is to place it on a user's avatar.
Accessibility Notes
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.