Toggle
Toggle is a native web component that works as a two-position button (pressed or not), useful for switching formatting or on/off options, such as bold in a text editor. It supports visual variants and sizes, and fires an event whenever its state changes. Use it when you need a binary control with a button-like appearance instead of a traditional checkbox.
Preview
<div style="display:flex; gap:0.5rem; align-items:center;">
<pura-toggle pressed aria-label="Bold">B</pura-toggle>
<pura-toggle variant="outline" aria-label="Italic"><em>I</em></pura-toggle>
<pura-toggle size="lg">Notifications</pura-toggle>
<pura-toggle disabled>Unavailable</pura-toggle>
</div>Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
pressed | boolean | false | Reflects the active (on) state of the toggle; present when pressed. |
disabled | boolean | false | Disables the toggle and prevents switching via click or keyboard. |
variant | string | default | Visual style: "default" (subtle) or "outline" (with a border). |
size | string | md | Button size: "sm", "md" or "lg". |
value | string | textContent | Value associated with the toggle; used by pura-toggle-group and sent in the change event. |
Installation
pura is copy-paste and dependency-free. Load the whole library, or just this component.
<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/toggle.js"></script>import "./pura/lib/toggle.js";