Toggle

GradeTested

UsageCopy Anchor Link

import { Toggle } from "@cadence-clinical/ui";

<Toggle pressed={showCeased} onPressedChange={setShowCeased}>
  Show ceased
</Toggle>;

Toggle is built on the Base UI Toggle and accepts all of its props. It follows the shadcn Toggle.

Use a toggle for something that is on or off in a toolbar or a filter row. For a setting with a label beside it that applies at once, use a Switch. For a set of toggles that belong together, use a Toggle group.

Variants, sizes and icon onlyCopy Anchor Link

variant is ghost or outline. size and iconOnly work as they do on a Button: three sizes whose height and text step together, and an icon-only option that keeps the label as hidden text.

import { Toggle } from "@cadence-clinical/ui";
import { Bold } from "lucide-react";

<Toggle iconOnly size="sm">
  <Bold />
  Bold
</Toggle>;

What Cadence changesCopy Anchor Link

• It presses in under the pointer, as a Button does: a slight, fast press that springs back, and none with reduced motion.

• Pressed is a fill and a boundary. The shadcn toggle marks pressed with a muted fill alone, which is too close to the page to tell the two states apart without colour. Here a ghost toggle gains a boundary when pressed, and an outline toggle's boundary becomes heavier and takes the accent.

• Size, text and icon follow the density, and iconOnly is its own option, as on Button.

• The focus ring is never faded.

AccessibilityCopy Anchor Link

• A toggle is announced as a button that is pressed or not pressed, so its label names the thing and not the state: "Show ceased", not "Showing ceased".

PropsCopy Anchor Link