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
      • Danger
      • Disabled
      • Shape
      • Size
      • Type
    • How to use it well
      • Don't leave users in the dark
    • Configuration
    • API
      • IconButton

    Icon button

    Icon buttons (like Buttons) let users take action. They are used for repeated or persistent actions on a page and lack visible labels to simplify the UI.

    Table of Contents
    • How to use it
      • Default
      • Danger
      • Disabled
      • Shape
      • Size
      • Type
    • How to use it well
      • Don't leave users in the dark
    • Configuration
    • API
      • IconButton
    Used for this
    • To simplify the appearance of repeated or persistent actions on a page
    • To enable action in a toolbar
    Not for this
    • To enable primary and secondary actions on a page, use a Button instead

    How to use it

    Default

    The typical usage of an Icon button component.

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

    Danger

    Use danger styling for Icon buttons that enable destructive action.

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

    Disabled

    A disabled 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

    Shape

    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

    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

    Icon buttons have 3 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 { IconButton } from '@zendeskgarden/react-buttons'

    API

    The IconButton component follows this structure:

    <Tooltip> {/* recommended */}  <IconButton>    {/* icon here */}  </IconButton></Tooltip>

    IconButton

    Extends ButtonHTMLAttributes<HTMLButtonElement>

    Nest the IconButton 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

    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