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`, `white` and `black`.
Solid
Outline
White
Black
Rounded badges
Use the `.rounded-full` class to create rounded badges.
Solid
Outline
White
Black
Solid badges
To create solid badges, simply use the `.badge-solid-[variant]` class.
Primary
Secondary
Success
Warn
Error
Outline badges
To create outline badges, simply use the `.badge-outline-[variant]` class.
Primary
Secondary
Success
Warn
Error
White/Black badges
To create white or black badge, simply use the `.badge-white` or `.badge-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