# Toggle

A button with a pressed / not-pressed state — for inline formatting and similar
on/off affordances. Controlled (`pressed` + `onPressedChange`) or uncontrolled
(`defaultPressed`).

## Sizes

`size` scales the padding, text and icon together — `sm`, `base` (default), `lg`.

## ToggleButtons (segmented)

`ToggleButtons` is a single-select segmented control: a sliding highlight
animates to the active `ToggleButton`. Drive it with `value` + `onValueChange`.

## Props

### `Toggle`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `pressed` | `boolean` | — | Controlled state. Omit for uncontrolled. |
| `defaultPressed` | `boolean` | `false` | Initial state when uncontrolled. |
| `onPressedChange` | `(pressed: boolean) => void` | — | Fired on toggle. |
| `variant` | `'primary' \| 'secondary'` | `'primary'` | Active fill style. |
| `size` | `'sm' \| 'base' \| 'lg'` | `'base'` | Padding/text scale. |

### `ToggleButtons` / `ToggleButton`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `value` | `string` | — | Selected value (`ToggleButtons`). |
| `onValueChange` | `(value: string) => void` | — | Fired on select. |
| `variant` | `'primary' \| 'secondary' \| 'ghost'` | `'primary'` | Highlight style. |
| `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | Item size. |
| `padding` | `boolean` | `true` | Frame padding around the segments. Set `false` for a tighter, edge-to-edge group. |
| `value` (item) | `string` | — | This button's value. |
| `icon` (item) | `boolean` | `false` | Square icon-only sizing. |
| `asChild` (item) | `boolean` | `false` | Render the single child instead of a `<button>`, forwarding the ref, selected state, and click. |