--- title: "Toggle" description: "A two-state button that is either on or off. Any button variant can be a toggle." url: "https://susonwaiba.github.io/htmx-ui/docs/components/toggle" section: "Components" --- # Toggle A two-state button that is either on or off. Any button variant can be a toggle. ```html ``` ## Usage - Add `data-toggle` and `aria-pressed="false"` (or `"true"` to start on) to any `.btn`. - Each click flips `aria-pressed`, which screen readers announce as "pressed" or "not pressed". Styles key off the same attribute. - The button fires a bubbling `toggle:change` event with `detail.pressed`. - Keep the label the same in both states. "Bold" pressed reads correctly; switching the text to "Not bold" doesn't. ## Any button `.btn-toggle` is the dedicated look: muted when off, filled when on. Every other variant works too: ghost and outline fill when on, secondary turns the brand colour, and primary and danger are outlined when off and solid when on. Click them: ```html ``` ## Sizes and shapes ```html ``` ## Disabled ```html ``` ## Saving with htmx Trigger the request on `toggle:change` rather than `click`, so it runs after `aria-pressed` has flipped, and send the new state with `hx-vals`. ```html

``` ## Reference | Class / attribute | Description | | --- | --- | | `.btn-toggle` | Toggle look: muted when off, filled when on. Combine with .btn-outline for a bordered one. | | `data-toggle` | Flips aria-pressed on click and fires toggle:change { pressed }. | | `aria-pressed` | "true" or "false". Drives the pressed style on every button variant. |