Ethereal Garden

Toggle

A two-state button that can be either on or off.

When To Use

Use the Toggle component when you need to:

  • Create a button that has two distinct states (on/off)
  • Allow users to toggle a single option on or off
  • Implement toolbar buttons that can be activated or deactivated
  • Create buttons for formatting options (like bold, italic in text editors)
  • Implement filter or view options that can be toggled

The Toggle component is ideal for binary state controls that need to be visually distinct from checkboxes or switches.

Examples

Basic

Variants

Default Variant

Outline Variant

With Custom Colors

Toggle Group

Text Alignment (Single Selection)

Text Formatting (Multiple Selection)

List Types (Single Selection with Variant)

Disabled

Disabled Toggles

Disabled Toggle Group Items

Disabled Toggle Group

Props

PropTypeDefault
$$typeof
symbol
-
displayName?
string
-
propTypes?
any
-