UI Components

Toggle

A two-state toggle button and a ToggleGroup for mutually exclusive selections — ideal for toolbars and settings.

Quick Preview

Structure

Anatomy of the Toggle — a button with pressed / unpressed binary state.

✦Labelpressed → bg-primary/10

Label — required text / icon / ReactNodeIcon slot — optional, placed anywhere insideContainer — rounded-lg, variant colors pressed state

States

Click any toggle to switch its pressed state live.

Default variant — all states

Click to toggle the pressed state

4 states

Default — off

Not pressed

Default — on

Pressed

Disabled — off

Cannot toggle

Disabled — on

Locked pressed

Outline variant — all states

Same logic, bordered style

4 states

Outline — off

Not pressed

Outline — on

Pressed

Disabled — off

Cannot toggle

Disabled — on

Locked pressed

Sizes

Three size tokens — sm md (default) lg.

Sizes — sm / md / lg

All sizes shown in both variants

3 states

Small — sm

Medium — md

Large — lg

Installation

// Copy Toggle.tsx to your components/ui/ folder
// src/components/ui/Toggle.tsx

Usage

import { Toggle, ToggleGroup, ToggleGroupItem } from '@/components/ui/Toggle'

// Standalone toggle
<Toggle defaultPressed onPressedChange={(p) => console.log(p)}>
  Bold
</Toggle>

// ToggleGroup (single selection)
<ToggleGroup defaultValue="left" onValueChange={(v) => setAlign(v)}>
  <ToggleGroupItem value="left">Left</ToggleGroupItem>
  <ToggleGroupItem value="center">Center</ToggleGroupItem>
  <ToggleGroupItem value="right">Right</ToggleGroupItem>
</ToggleGroup>

Examples

Toggle Group — Text Alignment

Outline Variant

Prompt Preview

Copy a prompt that recreates this UI

Paste this into your AI coding assistant to generate code that closely matches the reference, including color, size, shape, typography, spacing, and polish.

Copy-ready AI prompt

Starts from the current visual reference and project constraints.

Build a ui component named Toggle in React/Next.js.
Goal: recreate the same overall UI and behavior as the Toggle reference from a component gallery.
What it needs to communicate: A two-state toggle button and a ToggleGroup for mutually exclusive selections — ideal for toolbars and settings..

Project constraints:
- Use Next.js 16.2.6 with the App Router, React 19, TypeScript strict mode, and Tailwind CSS v4.
- Do not create a tailwind.config.js file. Use Tailwind v4 utilities and CSS variables where design tokens are needed.
- If you are implementing this inside the same project, use the Prompt font via next/font/google. If not, use the closest equivalent typeface.
- Return production-ready code with imports, responsive behavior, keyboard accessibility, and polished empty, hover, focus, active, and disabled states where relevant.
- Match the reference closely: color palette, spacing scale, border radius, shadows, icon scale, typography hierarchy, and motion timing.

Component-specific expectations:
- Keep the API concise and reusable.
- Make visual states feel polished and consistent across variants and sizes.
- Avoid unnecessary dependencies unless the behavior truly requires them.
- No explicit color literals were found in the examples. Match the live reference and the project accent color when appropriate.

Props to support:
- pressed: boolean — Controlled pressed state
- defaultPressed: boolean — default false — Initial pressed state (uncontrolled)
- onPressedChange: (pressed: boolean) => void — Called when pressed state changes
- variant: "default" | "outline" — default "default" — Visual style
- size: "sm" | "md" | "lg" — default "md" — Size of the toggle

Reference usage patterns:
- No examples were documented. Infer a sensible default presentation and one richer usage example.

Feature expectations:
- Two variants: default and outline
- Three sizes: sm, md, lg
- ToggleGroup for single-selection radio-like behaviour
- aria-pressed / aria-checked attributes
- Keyboard focus ring

Output requirements:
- Return complete code, not pseudocode.
- Include all necessary imports and helper types.
- Keep the implementation accessible, responsive, and visually finished.
- Match the reference for color, size, shape, typography, spacing, and interaction states as closely as possible.
- If multiple files are needed, organize them cleanly and explain the file structure briefly.

Tweak only product-specific copy or data after the first generation pass.

Props

Prop	Type	Default	Description
`pressed`	`boolean`	-	Controlled pressed state
`defaultPressed`	`boolean`	`false`	Initial pressed state (uncontrolled)
`onPressedChange`	`(pressed: boolean) => void`	-	Called when pressed state changes
`variant`	`"default" \| "outline"`	`"default"`	Visual style
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Size of the toggle

← Back to UI Components