💠 Toggle

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

Usage

The Toggle component functions as a switch that allows users to change a setting between two states, such as "on" or "off". Toggles are an intuitive choice for options that have an immediate effect and do not require a submission action to apply changes.

When to use

• Instant changes: Use a Toggle for settings that take effect immediately when changed, like enabling/disabling options in preferences or settings.
• Binary settings: Toggles are suitable for binary options where there are only two possible choices and no intermediate states.
• Reducing clutter: Employ Toggles when you want to reduce the clutter of having submit buttons for small actions.
• Space efficiency: Toggles are more space-efficient than other form elements like dropdowns or radio buttons for binary choices.

Avoid using Toggles for actions that require more deliberate consideration or have significant consequences, such as deleting data or logging out of an account. For actions that need confirmation or involve multiple steps, consider using buttons that trigger a confirmation dialog.

Examples

Default

Outline

With text

Disabled

Useful links

Here you go! Here are all the resources you might need if you are a designer, a developer or a content manager:

Accessibility

Keyboard interactions