Chuv Studio

02 — COMPONENTS

Toggle

Binary action control for saved states, view preferences, quick modes, and lightweight editor actions. Built from shadcn/ui and adapted to the Chuv Studio foundation with straight edges and system typography.

Core Patterns

Icon-only and text-based toggles for compact interface actions

Icon
<Toggle aria-label="Toggle bookmark">
  <Bookmark />
</Toggle>
With Text
<Toggle aria-label="Toggle saved">
  <Bookmark />
  Save
</Toggle>

Studio Contexts

Single toggles that make sense for a design and tech studio workflow

Portfolio Save

Focus Mode

Tool State

<Toggle variant="outline" aria-label="Toggle focus mode">
  <MoonStar />
  Focus Mode
</Toggle>

Editor Actions

A practical pattern for local formatting or stateful controls

Bold
<Toggle pressed={true} onPressedChange={setBold}>
  <BoldIcon />
  Bold
</Toggle>
Italic
<Toggle pressed={false} onPressedChange={setItalic}>
  <ItalicIcon />
  Italic
</Toggle>
Underline
<Toggle pressed={false} onPressedChange={setUnderline}>
  <UnderlineIcon />
  Underline
</Toggle>

Sizes & Variants

Use smaller toggles for dense utilities and larger toggles when the action has more prominence

SM
<Toggle size="sm" variant="default">
  <LayoutPanelTop />
  Layout
</Toggle>
Default
<Toggle size="default" variant="default">
  <LayoutPanelTop />
  Layout
</Toggle>
Outline
<Toggle size="default" variant="outline">
  <LayoutPanelTop />
  Layout
</Toggle>
LG
<Toggle size="lg" variant="default">
  <LayoutPanelTop />
  Layout
</Toggle>

Interactive Demo

Adjust size and variant, then preview the pressed state of the component

Size

Variant

State

Usage

Import, key props, and accessibility behavior

Import

import { Toggle } from "@/components/ui/toggle"

Key Props

Use pressed, defaultPressed, onPressedChange, size, and variant to control the component state and presentation.

When To Use

Toggle is best for a single on/off action, saved state, mode activation, or lightweight formatting control.

When Not To Use

Use Toggle Group when there is a set of related options. Use Switch when the interaction reads more like a settings preference.

Accessibility Notes

Always add aria-label when the button is icon-only. Keep the pressed state visible and ensure the action meaning stays clear.