Toggle

A two-state button that can be either on or off.

tsx

<Toggle aria-label="Toggle bold"><b>B</b></Toggle>

Toggle — bouton on/off à deux états (bold, italic, mute…). Différent de Switch qui représente un préférence "activer/désactiver ce feature" — Toggle est un mode d'affichage/formattage local.

Installation

Terminal

$ bext ui add toggle

Copy and paste the following into src/components/ui/toggle.tsx.

toggle.tsx

<Toggle aria-label="Toggle bold"><b>B</b></Toggle>

This component is interactive — make sure the shared island is loaded (see Islands). It reacts to data-ui="toggle" hooks.

Usage

tsx

1
2
3import { Toggle } from "@bext-stack/ui/primitives"

<Toggle aria-label="Toggle bold"><b>B</b></Toggle>

Anatomy

<Toggle pressed={boolean}>Content</Toggle>

API Reference

Toggle

Prop	Type	Default	Description
pressed	boolean	—	État initial pressé.
variant	"default" \| "outline"	"default"	undefined
size	"sm" \| "default" \| "lg"	"default"	undefined
disabled	boolean	—	undefined
children	ReactNode	—	undefined

Data Attributes

Attributs qu'on peut cibler en CSS custom pour override le style par état.

Attribute	On	Values	Description
data-ui="toggle"	root	undefined	undefined
data-state	root	"on" \| "off"	undefined

Keyboard

Key	Action
`Space / Enter`	Basculer on ↔ off.

Accessibility

role="button" aria-pressed. Wrapper avec un aria-label explicite ("Toggle bold").

Try it live

Open in play

Edit this component live in the bext playground. The PRISM + signals version is the bext-native idiom — fine-grained reactivity, no virtual DOM.

src/app/page.tsx 2 files · signals · runs in your browser

import { signalsIsland } from "@bext-stack/framework/signals";
import Showcase from "../islands/Showcase";

// A toggle is a pressable button with an on/off state. A single `on`
// signal drives the reactive style + aria-pressed + the readout text.
export default function Page() {
  return (
    <main style="max-width:640px;margin:0 auto;padding:48px 20px;font-family:Inter,system-ui,sans-serif">
      <h1 style="letter-spacing:-0.02em;margin-bottom:4px">Toggle</h1>
      <p style="color:#64748b;margin-top:0">A two-state button that can be on or off (signal-driven).</p>
      {signalsIsland("Showcase", Showcase, {})}
    </main>
  );
}

Pure PRISM + real bext signals — fine-grained, no re-render.

src/app/page.tsx 2 files · react · runs in your browser

import Showcase from "../components/Showcase";

// A toggle is a pressable button with an on/off state. The pressed
// state lives in a "use client" island.
export default function Page() {
  return (
    <main style={{ maxWidth: 640, margin: "0 auto", padding: "48px 20px", fontFamily: "Inter, system-ui, sans-serif" }}>
      <h1 style={{ letterSpacing: "-0.02em", marginBottom: 4 }}>Toggle</h1>
      <p style={{ color: "#64748b", marginTop: 0 }}>A two-state button that can be on or off.</p>
      <Showcase />
    </main>
  );
}

The React idiom — same UI, for comparison.

← Toast Toggle Group →

On This Page