Types
The most commonly used badge styles, we provide `solid`, `outline`, `soft`, `white` and `black`.
Solid
Outline
Soft
White
Black
<span class="badge style-solid-primary">Solid</span>
<span class="badge style-outline-primary">Outline</span>
<span class="badge style-soft-primary">Soft</span>
<span class="badge style-white">White</span>
<span class="badge style-black">Black</span>
Rounded badges
Use the `.rounded-full` class to create rounded badges.
Solid
Outline
Soft
White
Black
<span class="badge style-solid-primary rounded-full">Solid</span>
<span class="badge style-outline-primary rounded-full">Outline</span>
<span class="badge style-soft-primary rounded-full">Soft</span>
<span class="badge style-white rounded-full">White</span>
<span class="badge style-black rounded-full">Black</span>
Solid badges
To create solid badges, simply use the `.style-solid-[variant]` class.
Primary
Secondary
Success
Warn
Error
<span class="badge style-solid-primary">Primary</span>
<span class="badge style-solid-secondary">Secondary</span>
<span class="badge style-solid-success">Success</span>
<span class="badge style-solid-warn">Warn</span>
<span class="badge style-solid-error">Error</span>
Outline badges
To create outline badges, simply use the `.style-outline-[variant]` class.
Primary
Secondary
Success
Warn
Error
<span class="badge style-outline-primary">Primary</span>
<span class="badge style-outline-secondary">Secondary</span>
<span class="badge style-outline-success">Success</span>
<span class="badge style-outline-warn">Warn</span>
<span class="badge style-outline-error">Error</span>
Soft badges
To create soft badges, simply use the `.style-soft-[variant]` class.
Primary
Secondary
Success
Warn
Error
<span class="badge style-soft-primary">Primary</span>
<span class="badge style-soft-secondary">Secondary</span>
<span class="badge style-soft-success">Success</span>
<span class="badge style-soft-warn">Warn</span>
<span class="badge style-soft-error">Error</span>
White/Black badges
To create white or black badge, simply use the `.style-white` or `.style-black` class.
White
Black
<span class="badge style-white">White</span>
<span class="badge style-black">Black</span>
Icons
You can add icons from any library. In the example below we used Bootstrap Icons .
Favorite
Best ranking
Recent viewed
<span class="badge style-solid-error"><i class="bi-heart-fill"></i> Favorite</span>
<span class="badge style-outline-warn">Best ranking <i class="bi-star-fill"></i></span>
<span class="badge style-white">Recent viewed <i class="bi-eye-fill"></i></span>
