--- eleventyNavigation: key: Buttons parent: Examples order: 20 title: Buttons description: Button component styles and variants --- JuicyDocs includes a flexible button system with multiple variants and sizes. ## Basic Button The default `.btn` class provides a clean, rounded button style. ```html Default Button ```
Default Button
--- ## Variants ### Primary ```html Primary Primary Light ```
Primary Primary Light
### Secondary ```html Secondary ```
Secondary
### Success ```html Success Success Light ```
Success Success Light
### Warning ```html Warning Warning Light ```
Warning Warning Light
### Danger ```html Danger Danger Light ```
Danger Danger Light
### Outline ```html Outline ```
Outline
### Ghost ```html Ghost ```
Ghost
--- ## Sizes ```html Extra Small Small Medium Large Extra Large ```
Extra Small Small Medium Large Extra Large
--- ## Combining Variants and Sizes You can combine variant and size classes: ```html Small Primary Large Success XL Danger ```
Small Primary Large Success XL Danger
--- ## Full Width ```html Full Width Button ```
Full Width Button
--- ## Icon Button For square icon-only buttons: ```html ```
--- ## Disabled State ```html ```
--- ## Button Group Example ```html
Left Center Right
```
Left Center Right