Toggle
A two-state button that can be either on or off.
/** @jsxImportSource @bext-stack/framework */
// src/components/ui/toggle.tsx — toggled by the island (data-ui="toggle")
export function Toggle(o) {
return \`<button data-ui="toggle" data-state="\${o.pressed ? "on" : "off"}" class="inline-flex h-9 px-3 items-center rounded-md text-sm font-medium hover:bg-muted \${o.pressed ? "bg-accent text-accent-foreground" : ""}">\${o.children}</button>\`;
}Installation
$ bext ui add toggleCopy and paste the following into src/components/ui/toggle.tsx.
/** @jsxImportSource @bext-stack/framework */
// src/components/ui/toggle.tsx — toggled by the island (data-ui="toggle")
export function Toggle(o) {
return \`<button data-ui="toggle" data-state="\${o.pressed ? "on" : "off"}" class="inline-flex h-9 px-3 items-center rounded-md text-sm font-medium hover:bg-muted \${o.pressed ? "bg-accent text-accent-foreground" : ""}">\${o.children}</button>\`;
}This component is interactive — make sure the shared island is loaded (see Islands). It reacts to data-ui="toggle" hooks.
Examples
Default
With Text
Pressed
On This Page