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
Default Variant
Outline Variant
With Custom Colors
Text Alignment (Single Selection)
Text Formatting (Multiple Selection)
List Types (Single Selection with Variant)
Disabled Toggles
Disabled Toggle Group Items
Disabled Toggle Group
Props
Prop | Type | Default |
---|---|---|
$$typeof | symbol | - |
displayName? | string | - |
propTypes? | any | - |