# Toggle > A button with aria-pressed: one shared click listener flips the pressed state, which lives in the attribute. Page: https://svelte-lean.vercel.app/primitives/toggle · Markdown: https://svelte-lean.vercel.app/primitives/toggle.md · Index: https://svelte-lean.vercel.app/llms.txt A button that stays pressed or not pressed, for a formatting option or a view setting that applies at once. Tier 1. ```svelte ``` Click, or focus and press Space: the browser turns the key into a click, which the behavior handles. ## Examples ### Looks ```svelte {#each variants as variant}
{#each colors as color} {/each}
{/each} ``` The variant and the color draw the pressed state; the last toggle of each row is unpressed. ### Icon-only ```svelte ``` data-icon-only makes the button square; aria-label names it in both states. ### Sizes ```svelte ``` ### States ```svelte ``` aria-pressed="mixed" draws a dashed border, for a selection whose parts differ. ### Bound to content ```svelte 
const message = 'A line of code that is longer than the frame it is shown in, so it scrolls until the lines wrap.';
``` slean:change carries the new state; the application applies it. ## Usage Install `@svelte-lean/primitives` and `@svelte-lean/styles`. With `@svelte-lean/vite` the behavior registers itself for every `data-slean="toggle"`; without it, import the register module once. ```bash npm install @svelte-lean/primitives ``` `+layout.svelte or any client module` ```ts import '@svelte-lean/primitives/toggle-group/register'; ``` `stylesheets` ```ts import '@svelte-lean/styles/toggle.css'; ``` Render `aria-pressed="false"` or `"true"` with `type="button"`. Listen to `slean:change` on the button or any ancestor: `detail.value` is the state being written, `detail.previous` the one before, and `preventDefault()` keeps the current state. Use a checkbox or a switch when the value belongs to a form: the toggle has no form value. `programmatic` ```ts import { isPressed, setPressed } from '@svelte-lean/primitives/toggle'; // The same cancelable slean:change as a click; false when a listener cancelled it. setPressed(button, !isPressed(button)); ``` ## Anatomy | Part | Element | data-slean-part | Required | Notes | | --- | --- | --- | --- | --- | | root | `