Modus UI

Press Toggle

Web (React)

A switch whose thumb squashes and stretches as you drag or tap it.

A rounded-rectangle track on muted paper fills with the primary colour when on; the label is set in mono caps.

Modus / Press Toggle

Installation

CLI

npx @modus-ui/cli add press-toggle

Manual

  1. Copy the code from the component tab.
  2. Create a file at components/ui/press-toggle.tsx.
  3. Paste the code.

Usage

tsx
import { PressToggle } from "@/components/ui/press-toggle";

export default function Example() {
  return <PressToggle />;
}

Props

PropTypeDefaultDescription
checkedany--
defaultCheckedbooleanfalse-
onChangeany--
labelstring"Draft mode"-
disabledbooleanfalse-
trackColorstring"hsl(var(--muted))"-
trackOnColorstring"hsl(var(--primary))"-
thumbColorstring""-
thumbOnColorstring""-
widthnumber76-
heightnumber38-
radiusnumber10-
speednumber50-
stretchnumber36-
hoverScalenumber1.035-
colorDurationnumber320-
ariaLabelany--
idany--

Comments

  • No comments yet.