Toggle button

Switches a button between selected and unselected states.

toggle-button-demo.tsx

"use client";import { PushPinIcon } from "@phosphor-icons/react";import { ToggleButton } from "@/components/vip-ui/toggle-button";export function ToggleButtonDemo() {  return (    <ToggleButton>      {({ isSelected }) => (        <>          <PushPinIcon            weight={isSelected ? "fill" : "regular"}            aria-hidden="true"          />          Pin to favorites        </>      )}    </ToggleButton>  );}

Installation

CLI

Manual

The CLI adds the files, packages, theme variables, and Tailwind plugin that this component uses. Before you run it, set up your project.

npm

yarn

pnpm

bun

pnpm dlx shadcn@latest add https://vip-ui.dev/r/vip-toggle-button.json

Independent toggles

Notify me by

toggle-button-independent-demo.tsx

"use client";import { useState } from "react";import { ToggleButton } from "@/components/vip-ui/toggle-button";const options = ["Email", "SMS", "Push"];export function ToggleButtonIndependentDemo() {  const [selected, setSelected] = useState(new Set(["Email"]));  return (    <fieldset>      <legend className="mb-2 text-sm font-medium">Notify me by</legend>      <div className="flex flex-wrap gap-2">        {options.map((option) => (          <ToggleButton            key={option}            variant="ghost"            isSelected={selected.has(option)}            onChange={(isSelected) =>              setSelected((current) => {                const next = new Set(current);                if (isSelected) next.add(option);                else next.delete(option);                return next;              })            }          >            {option}          </ToggleButton>        ))}      </div>    </fieldset>  );}

Sizes

Set iconOnly for a square toggle, and give it an aria-label.

toggle-button-sizes-demo.tsx

"use client";import { PushPinIcon } from "@phosphor-icons/react";import { ToggleButton } from "@/components/vip-ui/toggle-button";export function ToggleButtonSizesDemo() {  return (    <div className="flex flex-col items-start gap-3">      <div className="flex items-center gap-2">        <ToggleButton size="xs">          <PushPinIcon aria-hidden="true" />          Pin        </ToggleButton>        <ToggleButton size="xs" iconOnly aria-label="Pin">          <PushPinIcon aria-hidden="true" />        </ToggleButton>      </div>      <div className="flex items-center gap-2">        <ToggleButton size="sm">          <PushPinIcon aria-hidden="true" />          Pin        </ToggleButton>        <ToggleButton size="sm" iconOnly aria-label="Pin">          <PushPinIcon aria-hidden="true" />        </ToggleButton>      </div>      <div className="flex items-center gap-2">        <ToggleButton>          <PushPinIcon aria-hidden="true" />          Pin        </ToggleButton>        <ToggleButton iconOnly aria-label="Pin">          <PushPinIcon aria-hidden="true" />        </ToggleButton>      </div>      <div className="flex items-center gap-2">        <ToggleButton size="lg">          <PushPinIcon aria-hidden="true" />          Pin        </ToggleButton>        <ToggleButton size="lg" iconOnly aria-label="Pin">          <PushPinIcon aria-hidden="true" />        </ToggleButton>      </div>      <div className="flex items-center gap-2">        <ToggleButton size="xl">          <PushPinIcon aria-hidden="true" />          Pin        </ToggleButton>        <ToggleButton size="xl" iconOnly aria-label="Pin">          <PushPinIcon aria-hidden="true" />        </ToggleButton>      </div>    </div>  );}

API reference

vip/ui adds or changes the props below. For all other props, see React Aria ToggleButton (opens in a new tab).

variant: "default" | "segmented" | "ghost" = "default": Sets the surface. Use segmented inside a ToggleButtonGroup. All variants show the selected state.
size: "xs" | "sm" | "md" | "lg" | "xl" = "md": Uses the Button heights. Without a size, a segmented toggle is 44 pixels high on small screens and 36 pixels from 640 pixels.
iconOnly: boolean = false: Makes the toggle a square for one icon. Give the toggle an aria-label.