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
      • Size
      • Type
    • Configuration
    • API
      • Button
      • ChevronButton
      • SplitButton

    Split button

    A Split button is a hybrid between a Dropdown Menu and a Button. It lets users choose from parallel actions and take action on their choice.

    Table of Contents
    • How to use it
      • Default
      • Danger
      • Disabled
      • Size
      • Type
    • Configuration
    • API
      • Button
      • ChevronButton
      • SplitButton
    Used for this
    • To let users select from multiple parallel actions. Actions are parallel when each represents a path forward for the user and none cancel the action.
    • To reduce visual complexity when there are multiple actions a user can take
    Not for this
    • To provide a way to navigate between pages, use Anchor instead
    • To provide a way to choose between primary and secondary actions, use two different Buttons instead

    How to use it

    Default

    The typical usage of a Split button component.

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

    Danger

    Use danger styling for Split buttons that enable destructive action.

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

    Disabled

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

    Split 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

    Split buttons are implemented in combination with a Menu component to show parallel actions. They can be default or primary.

    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, ChevronButton, SplitButton } from '@zendeskgarden/react-buttons'

    API

    The SplitButton component follows this structure:

    <SplitButton>  <Button />  <Dropdown>    <Trigger>      <ChevronButton />    </Trigger>    <Menu>      <Item />      <Item />      {/* etc. */}    </Menu>  </Dropdown></SplitButton>

    Implementation notes

    The split button pattern contains:

    • SplitButton component as a container
    • Button component for the main action
    • ChevronButton component to show/hide secondary actions
    • Dropdown, Menu and Trigger components for the secondary actions menu

    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

    ChevronButton

    Extends ButtonHTMLAttributes<HTMLButtonElement>

    Nest the ChevronButton within a Trigger component.

    Prop nameTypeDefaultDescription
    focusInset
    		boolean

    Applies inset box-shadow styling on focus

    isBasic
    		boolean
    false

    Applies basic button styling

    isDanger
    		boolean

    Applies danger styling

    isNeutral
    		boolean

    Applies neutral button styling

    isPill
    		boolean
    false

    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

    SplitButton

    Extends HTMLAttributes<HTMLDivElement>

    The SplitButton component applies appropriate styles to group the primary action Button together with the ChevronButton that shows/hides the secondary actions.

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