@ryanhelsing/ry-ui/docs/components/button.md

Framework-agnostic, Light DOM web components. CSS is the source of truth.

# Button

## `<ry-button>`

| Attribute | Values | Description |
|-----------|--------|-------------|
| `variant` | primary \| secondary \| outline \| ghost \| danger | Style (default: primary) |
| `size` | sm \| md \| lg | Size |
| `modal` | string | Opens modal with this ID |
| `drawer` | string | Opens drawer with this ID |
| `disabled` | boolean | Disable |

```html
<ry-button>Primary</ry-button>
<ry-button variant="outline">Outline</ry-button>
<ry-button variant="danger" size="sm">Delete</ry-button>
<ry-button modal="confirm">Open Modal</ry-button>
<ry-button drawer="nav">Open Drawer</ry-button>
```

## `<ry-toggle-button>`

Selectable button. Same-name buttons form a radio group (only one pressed).

| Attribute | Values | Description |
|-----------|--------|-------------|
| `name` | string | Group name (same name = single selection) |
| `value` | string | Value when selected |
| `pressed` | boolean | Currently pressed |
| `block` | boolean | Full-width |
| `size` | sm \| md \| lg | Size |
| `disabled` | boolean | Disable |

Events: `ry:change` — `e.detail.pressed`, `e.detail.value`

```html
<ry-cluster>
  <ry-toggle-button name="size" value="s">S</ry-toggle-button>
  <ry-toggle-button name="size" value="m" pressed>M</ry-toggle-button>
  <ry-toggle-button name="size" value="l">L</ry-toggle-button>
</ry-cluster>
```

Full-width card-style selection:

```html
<ry-grid cols="3">
  <ry-toggle-button name="plan" value="free" block>
    <strong>Free</strong><br><b>$0</b>/month
  </ry-toggle-button>
  <ry-toggle-button name="plan" value="pro" block pressed>
    <strong>Pro</strong><br><b>$10</b>/month
  </ry-toggle-button>
</ry-grid>
```

JS:
```js
// Get selected value from a group
const selected = document.querySelector('ry-toggle-button[name="plan"][pressed]');
selected?.value; // "pro"

// Set programmatically
button.pressed = true;
```