Vue

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.

Playground