Toggle

Button

Stateful toggle button with on/off states, icon support, and form integration

Basic Usage

Variants

Sizes

With Text

Disabled

Controlled

Usage Guidelines

When to Use

  • Toolbar toggles
  • View mode switching
  • Boolean button states

Accessibility

  • aria-pressed state
  • State change announced

Performance

  • CSS-only pressed state
  • Minimal re-renders

Common Mistakes

  • Unclear pressed state
  • Using for binary data (use Switch)

Frequently Asked Questions

Toggle is a button that stays pressed. Switch is for binary on/off states.
Yes, Toggle visually indicates its pressed/unpressed state.

View on GitHub

See the full source code on GitHub

Related Components

View all
Button

Primary action component with variant system, size options, loading states, icon slots, and optional shimmer effects

ButtonGroup

Grouped button layout with shared borders, orientation control, and seamless visual connection between actions

FloatingActionButton

Fixed-position FAB for primary screen actions with animation, positioning options, and extended label support

IconButton

Icon-only button with size variants, accessibility labels, and interaction states

Previous

Upload

Next

ToggleGroup