Components
Badge
A visual indicator for a value or status descriptor for UI elements.
Types
The most commonly used badge styles, we provide `solid`, `outline`, `soft`, `white` and `black`.
Solid
Outline
Soft
White
Black
Rounded badges
Use the `.rounded-full` class to create rounded badges.
Solid
Outline
Soft
White
Black
Solid badges
To create solid badges, simply use the `.style-solid-[variant]` class.
Primary
Secondary
Success
Warn
Error
Outline badges
To create outline badges, simply use the `.style-outline-[variant]` class.
Primary
Secondary
Success
Warn
Error
Soft badges
To create soft badges, simply use the `.style-soft-[variant]` class.
Primary
Secondary
Success
Warn
Error
White/Black badges
To create white or black badge, simply use the `.style-white` or `.style-black` class.
White
Black
Icons
You can add icons from any library. In the example below we used Bootstrap Icons .
Favorite
Best ranking
Recent viewed