# ToggleButton

> A native `<button>` that reflects an on/off state through its own `aria-pressed` attribute instead of a separate boolean prop — muting a track, toggling bold text, filtering a view.

```ts
import { ToggleButton } from "@sdxc/ui";
```

Renders a native `<button aria-pressed>` host clicking which submits its
enclosing form by default, flipping the state through a server round-trip
with no script required; pair `pressToggle()` through `mix` in a hydrated island to skip the round-trip.

## Examples

```tsx
<ToggleButton aria-pressed={isMuted} aria-label={t("player.mute")}>
	<VolumeXIcon />
</ToggleButton>
```

```tsx
<ToggleButton aria-pressed={isBold} variant="ghost" size="sm" aria-label={t("editor.bold")}>
	<BoldIcon />
</ToggleButton>
```

```tsx
<ToggleButton aria-pressed={filter === "active"} color="brand" name="filter" value="active">
	{t("tasks.filterActive")}
</ToggleButton>
```

## Props

| Prop | Type | Description |
| --- | --- | --- |
| `"aria-pressed"` | `NonNullable<TagProps<"button">["aria-pressed"]>` | The button's pressed state, reflected directly onto the host's own `aria-pressed` attribute. |
| `color?` | `"brand" \| "neutral" \| "success" \| "warning" \| "danger"` | Semantic color role. Defaults to DEFAULT_COLOR. |
| `variant?` | `"solid" \| "outline" \| "ghost"` | Visual weight. Defaults to DEFAULT_VARIANT. |
| `size?` | `"sm" \| "md" \| "lg"` | Size variant. Defaults to DEFAULT_SIZE. |

Also accepts everything in `Omit<TagProps<"button">, "aria-pressed">`.


## Types

| Name | Values | What it decides |
| --- | --- | --- |
| `Color` | `"brand" \| "neutral" \| "success" \| "warning" \| "danger"` | Semantic color role, each mapped to its matching `--ui-*` variables. |
| `Variant` | `"solid" \| "outline" \| "ghost"` | Visual weight: a solid fill with an on-solid foreground, a transparent fill with a strong colored border, or a fully transparent fill with just a colored label. |
| `Size` | `"sm" \| "md" \| "lg"` | Size variant controlling the button's padding and font size. |

## Also exported

- `ToggleButtonGroup`