Badges

Variety of badge positions showcasing alignment options on parent elements.

Source code

The source code for Alignments can be found at the following location, inside the downloaded package:

Badges tailored for avatars, indicating user status or notifications.

Source code

The source code for Avatar can be found at the following location, inside the downloaded package:

Classic badge style for straightforward notifications and counts.

Source code

The source code for Basic can be found at the following location, inside the downloaded package:

Minimalist dot badges to subtly indicate updates or presence.

Source code

The source code for Dot can be found at the following location, inside the downloaded package:

An enlarged dot badge for more prominent visibility while maintaining a minimalist design.

Source code

The source code for DotLarge can be found at the following location, inside the downloaded package:

Dot badge encircled by a ring, combining the simplicity of the dot with an added layer of emphasis.

Source code

The source code for DotRing can be found at the following location, inside the downloaded package:

Badges designed to fit seamlessly within textual content or inline elements.

Source code

The source code for Inline can be found at the following location, inside the downloaded package:

Badge style designed to overlap onto container elements, typically icons or avatars.

Source code

The source code for Overlaps can be found at the following location, inside the downloaded package: