Sheet

A sheet is a large container that enters from the edge of the screen when triggered by the merchant. It’s used to provide merchants with actions and information contextual to the page. It doesn’t interrupt their flow like a modal.

Examples

Use as the default option for a sheet.

Result

Properties

React

HTML

Props

childrenRequired

React.ReactNode

The child elements to render in the sheet

openRequired

boolean

Whether or not the sheet is open

True

False

onCloseRequired

() => void

Callback when the backdrop is clicked or `ESC` is pressed

Accessibility

Sheets provide an opportunity to let merchants dig into more detail on their current task, or access information for their current task in a different way. Although merchants may be able to see content in the sheet and the main page content at the same time, they should only be expected to interact with one or the other at any given time.

Keyboard support

Use the onClose prop so that the sheet can be closed with the esc key as well as with button-based controls
Use a button to open the sheet
When the sheet opens, focus moves to it so merchants who rely on the keyboard and screen readers can access it
Focus is kept in the sheet until it is dismissed
When the sheet closes, focus moves back to the button that launched it

Required components

The sheet component must be wrapped in the frame component.

Use in an embedded application

Use of the sheet component in an embedded application is not currently supported. If this is a feature you would like to see supported by Shopify App Bridge, let us know in the forums.

Responsive behavior

At small screen sizes, the sheet component enters the page from the bottom of the screen. At larger screen sizes, the sheet component enters the page from the right side of the scren.

Best practices

The sheet component should:

Include a heading that summarizes the actions and information in the sheet, for example, More filters
Be openable through clear actions, like a link or button
Be close-able through clear actions, like Done, the [X] button, and the esc key
Include information and actions contextual to the current task
Not block merchants from completing their task, like a modal would
Not open from within another sheet (only one sheet can be open at a time)
Preserve its state—the settings and actions won’t reset when it’s closed

The sheet component is best used in cases where the merchant needs to see elements behind it, and for that reason it uses a transparent backdrop. The backdrop is a full screen overlay which closes its parent component when pressed.