Skip to content

Toggle Button

A toggle is a two-state button that may be part of a group of mutually exclusive options.

Integration with headless UI libraries

In the meantime, you can still adopt Joy UI today for building a toggle button!

This document shows how to do it with existing Joy UI components combined with popular headless UI libraries.

Parting from the Icon Button component

Joy UI's Icon Button component is perfect for building a toggle button because it already produces a square button with an icon inside.

With Radix UI

Using Joy UI's Icon Buton component as a starting point, pass Radix UI's Toggle Button to the component prop. Radix will enhance the functionalities by preserving the styles of Joy UI components.

With React Aria

React Aria provides a useToggleButton hook that can be used with Joy UI's Icon Button component.