Custom Button Components

Basic Buttons

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

Ghost Buttons

<div class="btn-grouping"> <button class="btn btn--ghost">Primary Pumpkin</button> </div>

Anchor Tag Buttons

Gradient Link Primary Pumpkin Link Primary Orange Link

<div class="btn-grouping"> <a href="#" class="btn btn-gradient">Gradient Link</a> <a href="#" class="btn btn-pumpkin">Primary Pumpkin Link</a> <a href="#" class="btn btn-orange">Primary Orange Link</a> </div>

Outline Buttons

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

Subtle Buttons

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

Button Sizes

<div class="btn-grouping"> <button class="btn btn-gradient btn--sm">Small</button> <button class="btn btn-gradient btn--md">Medium</button> <button class="btn btn-gradient btn--lg">Large</button> <button class="btn btn-gradient btn--xl">Extra Large</button> </div>

Buttons with Icons Filled

<div class="btn-grouping"> <button class="btn btn-gradient btn--sm"> <i data-lucide="thumbs-up"></i>Small </button> <button class="btn btn-gradient btn--md"> <i data-lucide="thumbs-up"></i>Medium </button> <button class="btn btn-gradient btn--lg"> <i data-lucide="thumbs-up"></i>Large </button> <button class="btn btn-gradient btn--xl"> <i data-lucide="thumbs-up"></i>Extra Large </button> </div>

Buttons with Icons Outline

<div class="btn-grouping"> <button class="btn btn-orange--outline btn--sm"> <i data-lucide="thumbs-up"></i>Small </button> <button class="btn btn-orange--outline btn--md"> <i data-lucide="thumbs-up"></i>Medium </button> <button class="btn btn-orange--outline btn--lg"> <i data-lucide="thumbs-up"></i>Large </button> <button class="btn btn-orange--outline btn--xl"> <i data-lucide="thumbs-up"></i>Extra Large </button> </div>

Icon-Only Buttons

Disabled Buttons

Disabled Link

<div class="btn-grouping"> <button class="btn btn-gradient btn--disabled">Disabled Button</button> <button class="btn btn-pumpkin" disabled> Disabled with Attribute </button> <a href="#" class="btn btn-orange btn--disabled">Disabled Link</a> </div>

Block Buttons

Block Link Button

<div style="max-width: 500px; margin: 20px 0"> <button class="btn btn-gradient btn--block">Block Button</button> <a href="#" class="btn btn-pumpkin btn--block" style="margin-top: 10px">Block Link Button</a> </div>

Button Group Filled

<div class="btn-group"> <button class="btn btn-gradient">Gradient</button> <button class="btn btn-pumpkin">Primary Pumpkin</button> <button class="btn btn-orange">Primary Orange</button> <button class="btn btn-darkblue">Secondary Darkblue</button> <button class="btn btn-lightblue">Secondary Lightblue</button> </div>

Button Group Outline

<div class="btn-group"> <button class="btn btn-orange--outline">Gradient</button> <button class="btn btn-orange--outline"> Primary Pumpkin </button> <button class="btn btn-orange--outline">Primary Orange</button> <button class="btn btn-orange--outline"> Secondary Darkblue </button> <button class="btn btn-orange--outline"> Secondary Lightblue </button> </div>