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
- Name9.0.0-next.26•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 |