Toggle#
Component <neo-toggle> is a button with a sticky on/off pressed state. Same visual styling as <neo-button> but a click flips aria-pressed, as in the toolbar "Bold" / "Italic" control. Cluster several inside <neo-toggle-group> to build single- or multi-select toolbars.
The selected state's markup and its scoped CSS. The CSS is wrapped in <style>@scope { ... }</style> and applies to the preview only. Edits change the preview above, applied live while Sync is on, or when you click Patch or Replace. Patch morphs the preview; Replace swaps it outright.
Signals
Datastar signals declared in the selected state's markup. Change a value to update the preview, applied live while Sync is on, or when you click Patch.
Reference#
| Name | Type | Default | Description |
|---|---|---|---|
pressed | boolean | false | On/off state. Mirrored to aria-pressed. |
disabled | boolean | false | Non-interactive state. |
variant | "primary" | "secondary" | "ghost" | "danger" | none | Visual style. Omit for the default neutral styling. |
size | "sm" | "lg" | none | Control-size step: sm compact, lg large. Omit for the default size. |
value | string | none | Selection value inside a <neo-toggle-group> . The group reports pressed children as a comma-separated value. |
| Name | Description |
|---|---|
| default | Toggle content. An icon followed by a label is the common composition. |
[data-neo-toggle-off] | Content shown only when the toggle is not pressed. Pair with [data-neo-toggle-on] to swap label and icon by state. |
[data-neo-toggle-on] | Content shown only when the toggle is pressed. |
| Name | Detail | Bubbles | Description |
|---|---|---|---|
neo-toggle-change | { pressed: boolean } | yes | Fires after a click or Enter / Space activation flips pressed. |
Examples#
Variants#
5 fills share the button colour tokens. Besides a neutral default there are primary (accent), secondary (muted), ghost (transparent), and danger. Click any toggle to flip its pressed state.
Sizes#
size="sm" tightens padding and font size for dense rows. Omit it for the default size.
Pressed#
The sticky on state, reflected to aria-pressed="true" so assistive technology reads the toggle correctly. The default variant gets a subtle inset fill; the coloured variants deepen.
Disabled#
disabled blocks pointer events, drops the host from the tab order, and fades it. Both the off and pressed-disabled states stay readable so the value is still visible.
With icon#
A <neo-icon> as the first child is spaced from the label by the toggle's flex layout and inherits the current font colour. It recolours with the variant and pressed state.
Mark up both [data-neo-toggle-off] and [data-neo-toggle-on] children and pressed swaps which one paints, when the toggled state needs a different verb, icon, or both. Click to flip.