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