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
      • 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
      • Footers
      • Headers
      • Placement
      • Size
    • Configuration
    • API
      • Sheet

    Sheet

    The Sheet component is a container that acts as a supplementary view, providing access to important contextual information.

    Table of Contents
    • How to use it
      • Default
      • Footers
      • Headers
      • Placement
      • Size
    • Configuration
    • API
      • Sheet
    Used for this
    • To display additional information that aids the primary view
    Not for this
    • For an experience where the primary view is obscured to display supplementary information or actions, use a Drawer

    How to use it

    Default

    A typical usage of a Sheet component.

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

    Footers

    Sheet footers comes in three variations: no footer, footer with an Anchor, and footer with Buttons.

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

    Headers

    Sheet headers come in three variations: no title, title, and title with description.

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

    Placement

    Sheets can be placed at the start or end of the container. End is the default placement.

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

    Size

    Sheets default to 380px in width. You can customize the width based on your intended experience to any size using pixels or our grid system.

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

    Configuration

    • Name9.4.0•View source•View on npm
    • Installnpm install @zendeskgarden/react-chrome
    • Depsnpm install react react-dom styled-components @zendeskgarden/react-theming
    • Importimport { Sheet } from '@zendeskgarden/react-chrome'

    API

    The Sheet component follows this structure:

    <Sheet>  <Sheet.Header>    <Sheet.Title>      {/* a text to label the sheet */}    </Sheet.Title>    <Sheet.Description>      {/* a text describing the sheet */}    </Sheet.Description>  </Sheet.Header>    <Sheet.Body>    {/* main content of the sheet */}  </Sheet.Body>
  <Sheet.Footer>    <Sheet.FooterItem>      {/* items to set in the footer, such as buttons */}    </Sheet.FooterItem>  </Sheet.Footer>
  <Sheet.Close /></Sheet>

    Please keep the subcomponent structure in the order displayed in the example above.

    Sheet

    Extends HTMLAttributes<HTMLElement>

    The Sheet component provides state and accessibility attributes to its children.

    Prop nameTypeDefaultDescription
    focusOnMount
    		boolean

    Directs keyboard focus to the sheet on mount

    id
    		string

    Identifies the sheet

    isAnimated
    		boolean
    true

    Determines whether animation for opening and closing the sheet is used

    isOpen
    		boolean

    Opens the sheet

    placement
    		'end' | 'start'
    'end'

    Adjusts the placement of the sheet

    restoreFocus
    		boolean

    Returns keyboard focus to the element that triggered the sheet

    size
    		string
    '380px'

    Sets the size of the open sheet

    Sheet.Body

    Extends HTMLAttributes<HTMLDivElement>

    A Body requires additional accessible functionality to make the element focusable for keyboard scrolling. Nest it within the Sheet component.

    Sheet.Title

    Extends HTMLAttributes<HTMLDivElement>

    A Title labels the Sheet for assistive technology. Nest it within a Header component.

    Sheet.Description

    Extends HTMLAttributes<HTMLDivElement>

    A Description describes the Sheet for assistive technology. Nest it within a Header component.

    Sheet.Header

    Extends HTMLAttributes<HTMLElement>

    Nest a Header within the Sheet component. If neither Title nor Description are used, the Header should be omitted.

    Sheet.Footer

    Extends HTMLAttributes<HTMLElement>

    Nest a Footer within the Sheet component.

    Prop nameTypeDefaultDescription
    isCompact
    		boolean

    Applies compact styling and centers the elements

    Sheet.FooterItem

    Extends HTMLAttributes<HTMLDivElement>

    Nest a FooterItem within the Footer component.

    Sheet.Close

    Extends ButtonHTMLAttributes<HTMLButtonElement>

    Nest a Close button within a Sheet component as the last child for consistent tab order.

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