Toggle icon button
A Toggle Icon Button (like a Toggle Button) lets users turn something on and off like a light switch. It is used for repeated or persistent actions on a page and lacks a visible label to simplify the UI.
- To see or compare the results of a settings change
- To cause an immediate effect, such as making text bold
- To simplify the appearance of repeated or persistent actions on a page
- To enable action in a toolbar
- To let users select from a list of settings, use Checkboxes instead
- To include an icon and a label, use a Button with a start or end icon
How to use it
Default
The typical usage of a Toggle Icon Button component.
Disabled
A disabled Toggle Icon 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.
Shape
Toggle Icon Buttons are circular by default, but they can be squares too.
Size
Toggle Icon Buttons can be small, medium, or large. The default size is medium.
Type
Toggle Icon Buttons have three types: basic, outline, and primary. The default type is basic.
How to use it well
Don’t leave users in the dark
Include a Tooltip to help any users who may be unfamiliar with the icon.
Configuration
- Name9.5.3•View source•View on npm
- Installnpm install @zendeskgarden/react-buttons
- Depsnpm install react react-dom styled-components @zendeskgarden/react-theming
- Importimport { ToggleIconButton } from '@zendeskgarden/react-buttons'
API
The ToggleIconButton component follows this structure:
<Tooltip> {/* recommended */}<ToggleIconButton>{/* icon here */}</ToggleIconButton></Tooltip>
ToggleIconButton
Extends ButtonHTMLAttributes<HTMLButtonElement>
Nest the ToggleIconButton within a Tooltip and provide an aria-label to ensure it is
accessible. See default example.
| Prop name | Type | Default | Description |
|---|---|---|---|
focusInset | boolean | Applies inset | |
isBasic | boolean | true | Applies basic button styling |
isDanger | boolean | Applies danger styling | |
isNeutral | boolean | Applies neutral button styling | |
isPill | boolean | true | 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 | |
isRotated | boolean | Rotates icon 180 degrees | |
size | 'small' | 'medium' | 'large' | 'medium' | Specifies the button size |