Docs
components
Toggle Button

Toggle Button

A toggle button allows a user to toggle a selection on or off, for example switching between two states or modes.

Toggle buttons are similar to action buttons, but support an additional selection state that is toggled when a user presses the button. There is no built-in HTML element that represents a toggle button, so React Aria implements it using ARIA attributes.

Preview

Code

Installation

CLI

Copy & Paste

NPM

PNPM

Bun

Yarn

npx shadcn@latest add https://jollyui.dev/default/toggle

Examples

Default

Preview

Code

Outline

Preview

Code

With Text

Preview

Code

Small

Preview

Code

Large

Preview

Code

Disabled

Preview

Code

File Trigger Toggle Button Group

On This Page

Installation
Examples