WFP logoDesign System

A two-state button that can be either on or off.

Installation

pnpm dlx shadcn@latest add https://dev.designsystem.wfp.org/r/toggle.json

Usage

import { Toggle } from "@/components/ui/toggle";
<Toggle>Toggle</Toggle>

Examples

Default

Outline

Text

Small

Large

Disabled

Changelog

  • 3 March 2026: added border colour for the toggled state

On this page