Garden 9 is now available.
The website has been updated to the latest major version. View previous versions
Skip to main content
Design
Components
Patterns
    • Introduction
      • Overview
    • Foundations
      • Bedrock CSS
      • Design tokens
      • Containers
      • Theming
      • Versions
    • Components
      • Accordion
      • Anchor
      • Avatar
      • Breadcrumbs
      • Buttons
        • Button
        • Icon button
        • Split button
        • Toggle button
        • Toggle icon button
      • Chrome
      • Code block
      • Color picker
      • Color swatch
      • Date picker
      • Draggable
      • Drawer
      • Forms
      • Grid
      • Loaders
      • Menu
      • Modal
      • Notification
      • Pagination
      • Pane
      • Sheet
      • Status indicator
      • Stepper
      • Table
      • Tabs
      • Tags
      • Tiles
      • Timeline
      • Tooltip
      • Tooltip dialog
      • Typography
      • Well
    Table of Contents
    • How to use it
      • Default
      • Disabled
      • Size
      • Type
    • Configuration
    • API
      • ToggleButton

    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.


    Table of Contents
    • How to use it
      • Default
      • Disabled
      • Size
      • Type
    • Configuration
    • API
      • ToggleButton

    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.

    Toggle dark mode
    Set primary hue
    Toggle RTL
    Open in CodeSandbox
    Copy code
    View code

    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.

    Toggle dark mode
    Set primary hue
    Toggle RTL
    Open in CodeSandbox
    Copy code
    View code

    Size

    Toggle Buttons can be small, medium, or large. The default size is medium.

    Toggle dark mode
    Set primary hue
    Toggle RTL
    Open in CodeSandbox
    Copy code
    View code

    Type

    Toggle Buttons can be default, primary, or basic.

    Toggle dark mode
    Set primary hue
    Toggle RTL
    Open in CodeSandbox
    Copy code
    View code

    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 { ToggleButton } from '@zendeskgarden/react-buttons'

    API

    ToggleButton

    Extends ButtonHTMLAttributes<HTMLButtonElement>

    Prop nameTypeDefaultDescription
    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

    Garden is the design system by Zendesk.
    BlogGitHubVersions
    © Zendesk 2025