Switch
On or off, applied at once. The app's switch is a 44 by 26 track in the accent; the reference style puts a ring in the knob and comes in two shapes.
Side by side
Mafold todayui.tsx · Switch
BoardUI stylerebuilt on MDS tokens
Pill
Large
Medium
Small
Rectangle
Large
Medium
Small
Measures
Mafold: 44 × 26 track, 22px white knob, 2px inset, 150ms slide; off is --mf-bubble, which is close to white on a card. Reference: three sizes, a ring knob that takes the accent when on, and an off track on --mf-fill-3.
Usage
import { Switch } from "@/components/mafold";
<Switch on={enabled} onChange={setEnabled} label="Notifications" />