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
      • Media
      • Size
      • Stretched
      • Type
    • Configuration
    • API
      • Button

    Button

    Buttons let users take action quickly. Use a Button to enable actions or decisions that are important to a user’s workflow.

    Table of Contents
    • How to use it
      • Default
      • Danger
      • Disabled
      • Media
      • Size
      • Stretched
      • Type
    • Configuration
    • API
      • Button
    Used for this
    • To enable user action
    • To draw attention to relevant actions in a user’s workflow
    Not for this
    • To navigate to another page, use Anchor instead
    • To help users choose from parallel actions, use Split button instead

    How to use it

    Default

    The typical usage of a Button component.

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

    Danger

    Use danger styling for Buttons that enable destructive action.

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

    Disabled

    A disabled Button prevents user interaction. It doesn’t appear in the tab order, can’t receive focus, and may not read aloud by a screenreader.

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

    Media

    Media elements add even more context to a button.

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

    Size

    Buttons come in small, medium, and large. The default size is medium.

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

    Stretched

    Buttons can stretch to fill the width of their container.

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

    Type

    There are 3 types of Buttons: default, primary, and basic.

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

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

    API

    The Button component follows this structure:

    <Button>  <Button.StartIcon /> {/* optional */}  {/* button text */}  <Button.EndIcon /> {/* optional */}</Button>

    Button

    Extends ButtonHTMLAttributes<HTMLButtonElement>

    The Button component applies appropriate styles based on its usage and the props provided.

    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

    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

    Button.EndIcon

    Extends SVGAttributes<SVGElement>

    The EndIcon component appropriately positions its child icon within the button. Nest it within the Button component as the last child. See media example.

    Prop nameTypeDefaultDescription
    isRotated
    		boolean

    Rotates icon 180 degrees

    Button.StartIcon

    Extends SVGAttributes<SVGElement>

    The StartIcon component appropriately positions its child icon within the button. Nest it within the Button component as the first child. See media example.

    Prop nameTypeDefaultDescription
    isRotated
    		boolean

    Rotates icon 180 degrees

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