Toggle

A "paper button" that stays pressed. Standalone toggles can be elevated; inside containers use the flat variants to keep the elevation budget clean.

Basic Usage

Variants

Use default/outline for standalone controls, and flat/flat-outline when nested in Card/Dialog/Panel.

Sizes

States

Controlled toggle (best inside containers)

Best Practices

In Paper Cut, containers own elevation. Nested controls should be visually "quiet".

Standalone (elevated)

Use variant="default" when the toggle is the "hero" control.

Nested in Card (flat)

Anti-patterns

Avoid stacking elevated controls inside an elevated container.

❌ Noisy: elevated inside elevated
✅ Correct: container elevates, controls flatten