Custom Badge Components

Basic Badges

Gradient Primary Pumpkin Primary Orange Secondary Darkblue Secondary Lightblue Secondary Violet Secondary Yellow Secondary Aquamarine Secondary Apricot Dark Light
<div class="badge-group"> <span class="badge badge-gradient">Gradient</span> <span class="badge badge-pumpkin">Primary Pumpkin</span> <span class="badge badge-orange">Primary Orange</span> <span class="badge badge-darkblue">Secondary Darkblue</span> <span class="badge badge-lightblue">Secondary Lightblue</span> <span class="badge badge-violet">Secondary Violet</span> <span class="badge badge-yellow">Secondary Yellow</span> <span class="badge badge-aquamarine">Secondary Aquamarine</span> <span class="badge badge-apricot">Secondary Apricot</span> <span class="badge badge-dark">Dark</span> <span class="badge badge-light">Light</span> </div>

Outline Badges

Primary Pumpkin Primary Orange Secondary Darkblue Secondary Lightblue Secondary Violet Secondary Yellow Secondary Aquamarine Secondary Apricot Dark Light
<div class="badge-group"> <span class="badge badge-pumpkin--outline">Primary Pumpkin</span> <span class="badge badge-orange--outline">Primary Orange</span> <span class="badge badge-darkblue--outline">Secondary Darkblue</span> <span class="badge badge-lightblue--outline">Secondary Lightblue</span> <span class="badge badge-violet--outline">Secondary Violet</span> <span class="badge badge-yellow--outline">Secondary Yellow</span> <span class="badge badge-aquamarine--outline">Secondary Aquamarine</span> <span class="badge badge-apricot--outline">Secondary Apricot</span> <span class="badge badge-dark--outline">Dark</span> <span class="badge badge-light--outline">Light</span> </div>

Subtle Badges

Primary Pumpkin Primary Orange Secondary Darkblue Secondary Lightblue Secondary Violet Secondary Yellow Secondary Aquamarine Secondary Apricot Dark Light
<div class="badge-group"> <span class="badge badge-pumpkin--subtle">Primary Pumpkin</span> <span class="badge badge-orange--subtle">Primary Orange</span> <span class="badge badge-darkblue--subtle">Secondary Darkblue</span> <span class="badge badge-lightblue--subtle">Secondary Lightblue</span> <span class="badge badge-violet--subtle">Secondary Violet</span> <span class="badge badge-yellow--subtle">Secondary Yellow</span> <span class="badge badge-aquamarine--subtle">Secondary Aquamarine</span> <span class="badge badge-apricot--subtle">Secondary Apricot</span> <span class="badge badge-dark--subtle">Dark</span> <span class="badge badge-light--subtle">Light</span> </div>

Badge Sizes

Small Medium Large Extra Large
<div class="badge-group"> <span class="badge badge-gradient badge--sm">Small</span> <span class="badge badge-gradient badge--md">Medium</span> <span class="badge badge-gradient badge--lg">Large</span> <span class="badge badge-gradient badge--xl">Extra Large</span> </div>

Badges with Icons

Small Medium Large Extra Large
<div class="badge-group"> <span class="badge badge-gradient badge--sm"><i data-lucide="volume-2"></i>Small</span> <span class="badge badge-gradient badge--md"><i data-lucide="volume-2"></i>Medium</span> <span class="badge badge-gradient badge--lg"><i data-lucide="volume-2"></i>Large</span> <span class="badge badge-gradient badge--xl"><i data-lucide="volume-2"></i>Extra Large</span> </div>

Positioned Badges

8
3
<div class="badge-group"> <div class="badge-container"> <button class="btn btn-gradient">Notifications</button> <span class="badge badge-gradient badge--positioned">8</span> </div> <div class="badge-container"> <button class="btn">Messages</button> <span class="badge badge-gradient badge--positioned">3</span> </div> </div>