Garden 9 is now available.
The website has been updated to the latest major version. View previous versions
Skip to main content
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
      • Icon transition
      • Shape
      • Size
      • Type
    • How to use it well
      • Don’t leave users in the dark
    • Configuration
    • API
      • ToggleIconButton

    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.

    Table of Contents
    • How to use it
      • Default
      • Disabled
      • Icon transition
      • Shape
      • Size
      • Type
    • How to use it well
      • Don’t leave users in the dark
    • Configuration
    • API
      • ToggleIconButton
    Used for this
    • 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
    Not for this
    • 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.

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

    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.

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

    Icon transition

    The icon can transition from stroke style to fill style when the button is pressed.

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

    Shape

    Toggle Icon Buttons are circular by default, but they can be squares too.

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

    Size

    Toggle Icon 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 Icon Buttons have three types: basic, outline, and primary. The default type is basic.

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

    How to use it well

    Don’t leave users in the dark

    Do this

    Include a Tooltip to help any users who may be unfamiliar with the icon.

    Configuration

    • Name9.1.0•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 nameTypeDefaultDescription
    focusInset
    		boolean

    Applies inset box-shadow styling on focus

    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

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