Table of Contents
Toggle button
A Toggle Button (like a Toggle) lets users turn something on and off like a light switch. Unlike a Checkbox, which is used for selection, a Toggle Button is used for activation.
Used for this
- To see or compare the results of a settings change
- To activate a mode (such as “dark mode”) which takes immediate effect
Not for this
- To let users select from a list of settings, use Checkboxes instead
How to use it
Default
The typical usage of a Toggle Button component.
Disabled
A disabled Toggle Button prevents user interaction. It doesn’t appear in the tab order, can’t receive focus, and may not be read aloud by a screenreader.
Size
Toggle Buttons can be small, medium, or large. The default size is medium.
Type
Toggle Buttons can be default, primary, or basic.
Configuration
- Name8.76.4•View source•View on npm
- Installnpm install @zendeskgarden/react-buttons
- Depsnpm install react react-dom styled-components @zendeskgarden/react-theming
- Importimport { ToggleButton } from '@zendeskgarden/react-buttons'
API
ToggleButton
Extends ButtonHTMLAttributes<HTMLButtonElement>
| Prop name | Type | Default | Description |
|---|---|---|---|
focusInset | boolean | – | Applies inset box-shadow styling on focus |
isBasic | boolean | – | Applies basic button styling |
isDanger | boolean | – | Applies danger styling |
isLink | boolean | – | Applies link (anchor) button styling |
isNeutral | boolean | – | Applies neutral button styling |
isPill | boolean | – | Applies pill button styling |
isPressed | boolean | 'mixed' | – | Determines if the button is pressed. Use "mixed" to indicate that the toggle controls other elements which do not share the same value. |
isPrimary | boolean | – | Applies primary button styling |
isStretched | boolean | – | Stretches the button fill to its container width |
size | 'small' | 'medium' | 'large' | 'medium' | Specifies the button size |