Toggle

Basic

A toggle button allows users to switch between two states, such as enabling or disabling a feature.

Installation

npx shadcn@latest add @intentui/toggle

Manual installation

npm i react-aria-components tailwind-variants

Intent

Customize the look of the toggle button using the intent prop.

Size

Adjust the toggle button's size using the size prop.

Controlled

Manage the toggle button's state with the isSelected prop.

Disabled

Disable a toggle button by setting the disabled prop.

Touch hitbox

Sometimes you may want to use this button with only an icon. In that case, you can apply the touch-target utility class on the sq-* size to increase the button’s hitbox for improved accessibility.

@utility touch-target {
  position: relative;
  &::before {
    content: "";
    position: absolute;
    display: block;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    min-height: 44px;
    min-width: 44px;
    z-index: 9999;
  }
}