Toggle

Edit the code — the preview updates live. Try changing props, text, or classes.

render(
  <Toggle aria-label="Bold">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M6 4h8a4 4 0 0 1 0 8H6zM6 12h9a4 4 0 0 1 0 8H6z"/></svg>
    Bold
  </Toggle>
)

Copy the source into your project with the registry CLI:

Or install the package and import it:

Import Toggle from "@stacklyui/ui" and compose it as shown in the playground above. Every interactive primitive is built on Radix, so keyboard navigation, focus management, and ARIA are handled for you.