Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/zendeskgarden/website/llms.txt

Use this file to discover all available pages before exploring further.

​
Installation

npm install @zendeskgarden/react-buttons styled-components

import { ToggleButton } from '@zendeskgarden/react-buttons';

​
When to use

Use a Toggle button:
  • To see or compare the results of a settings change in real time
  • To activate a mode (such as bold text or dark mode) that takes immediate effect
Do not use a Toggle button:
  • To let users select from a list of settings — use Checkboxes instead
Unlike a Checkbox (which is used for selection), a Toggle button is used for activation. The key distinction is immediacy: toggling it takes effect right away, without a form submission step.

​
Usage

​
Default

The isPressed prop controls the on/off state. ToggleButton communicates its state to assistive technologies via the aria-pressed attribute. 
import { useState } from 'react';
import { ToggleButton } from '@zendeskgarden/react-buttons';

function Example() {
  const [isPressed, setIsPressed] = useState(false);

  return (
    <ToggleButton
      isPressed={isPressed}
      onClick={() => setIsPressed(prev => !prev)}
    >
      {isPressed ? 'Bold on' : 'Bold off'}
    </ToggleButton>
  );
}

​
Disabled

A disabled Toggle button prevents user interaction. It does not appear in the tab order, cannot receive focus, and may not be read aloud by a screen reader. 
<ToggleButton disabled isPressed={false}>
  Unavailable
</ToggleButton>

​
Sizes

Toggle buttons can be small, medium, or large. The default size is medium. 
<ToggleButton size="small" isPressed={false}>Small</ToggleButton>
<ToggleButton size="medium" isPressed={false}>Medium</ToggleButton>
<ToggleButton size="large" isPressed={false}>Large</ToggleButton>

​
Types

Toggle buttons share the same visual types as Button: default, primary, and basic. 
<ToggleButton isPressed={false}>Default</ToggleButton>
<ToggleButton isPrimary isPressed={true}>Primary (pressed)</ToggleButton>
<ToggleButton isBasic isPressed={false}>Basic</ToggleButton>

​
Accessibility

ToggleButton automatically sets aria-pressed="true" when isPressed is true and aria-pressed="false" when it is false. This communicates the button’s current state to screen readers without any additional markup. 
{/* renders: <button aria-pressed="true"> */}
<ToggleButton isPressed={true}>Dark mode</ToggleButton>

​
API

​
ToggleButton props

​
props.isPressed
boolean
required
The current pressed (on/off) state of the button. Maps to aria-pressed.
​
props.isPrimary
boolean
default:"false"
Applies filled primary styling.
​
props.isBasic
boolean
default:"false"
Applies text-only basic styling (no border or background).
​
props.isDanger
boolean
default:"false"
Applies danger styling.
​
props.isNeutral
boolean
default:"false"
Applies neutral styling, reducing visual emphasis.
​
props.isStretched
boolean
default:"false"
Stretches the button to fill its container’s full width.
​
props.size
'small' | 'medium' | 'large'
default:"'medium'"
Controls the button’s size.
​
props.disabled
boolean
default:"false"
Prevents user interaction and applies disabled styling.

Build docs developers (and LLMs) love

Get started for freeTalk to us