# Button Gallery

A full catalogue of `XWUIButton`, built to mirror a typical Tailwind + lucide
"button library" page. Every section is produced from **config alone** - no
per-button CSS - proving the component covers the whole spectrum:

1. **Core Variants** - `primary`, `secondary`, `outline`, `ghost`, `link`.
2. **Semantic Colors** - `success`, `danger`, `warning`, `info`.
3. **Soft & Tonal** - `tonal: true` composed with any semantic variant.
4. **Sizes** - `xs` → `xl`.
5. **Icons & Mixed Content** - leading/trailing icons, icon-only, and a round
   (`shape: 'pill'`) tonal FAB-style add button.
6. **Interactive States** - `disabled` and a click-to-`setLoading` spinner.
7. **Shapes & Border Radii** - `shape: 'sharp' | 'rounded' | 'pill'`.
8. **Trendy & Advanced** - `effect: 'gradient' | 'raised' | 'glow'` plus a
   `XWUIButtonSplit` dual-action control.

```ts
new XWUIButton(el, { text: "Tonal Primary", variant: "primary", tonal: true });
new XWUIButton(el, { text: "Full Pill", variant: "secondary", shape: "pill" });
new XWUIButton(el, { text: "Gradient Fill", variant: "primary", shape: "pill", effect: "gradient" });
```