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: 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 drive 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#
Five fills share the button colour tokens: a neutral default, 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, so 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.