Buttons

JuicyDocs includes a flexible button system with multiple variants and sizes.

Basic Button

The default .btn class provides a clean, rounded button style.

<a href="#" class="btn">Default Button</a>
<button class="btn">Button Element</button>

---

Variants

Primary

<a href="#" class="btn btn--primary">Primary</a>
<a href="#" class="btn btn--primary-light">Primary Light</a>

Secondary

<a href="#" class="btn btn--secondary">Secondary</a>

Success

<a href="#" class="btn btn--success">Success</a>
<a href="#" class="btn btn--success-light">Success Light</a>

Warning

<a href="#" class="btn btn--warning">Warning</a>
<a href="#" class="btn btn--warning-light">Warning Light</a>

Danger

<a href="#" class="btn btn--danger">Danger</a>
<a href="#" class="btn btn--danger-light">Danger Light</a>

Outline

<a href="#" class="btn btn--outline">Outline</a>

Ghost

<a href="#" class="btn btn--ghost">Ghost</a>

---

Sizes

<a href="#" class="btn btn--xs">Extra Small</a>
<a href="#" class="btn btn--sm">Small</a>
<a href="#" class="btn btn--md">Medium</a>
<a href="#" class="btn btn--lg">Large</a>
<a href="#" class="btn btn--xl">Extra Large</a>

---

Combining Variants and Sizes

You can combine variant and size classes:

<a href="#" class="btn btn--primary btn--sm">Small Primary</a>
<a href="#" class="btn btn--success btn--lg">Large Success</a>
<a href="#" class="btn btn--danger btn--xl">XL Danger</a>

---

Full Width

<a href="#" class="btn btn--primary btn--full">Full Width Button</a>

---

Icon Button

For square icon-only buttons:

<button class="btn btn--icon btn--primary">
    <svg>...</svg>
</button>

---

Disabled State

<button class="btn" disabled>Disabled</button>
<button class="btn btn--primary" disabled>Disabled Primary</button>

---

Button Group Example

<div class="flex">
    <a href="#" class="btn btn--primary rounded-r-none">Left</a>
    <a href="#" class="btn btn--primary rounded-none border-x-0">Center</a>
    <a href="#" class="btn btn--primary rounded-l-none">Right</a>
</div>