---
title: Sheet
description: |-
  The Sheet component displays essential information for customers at the bottom of the screen, appearing above other elements. Use it sparingly to avoid distracting customers during checkout. This component requires access to [Customer Privacy API](/docs/api/checkout-ui-extensions/2025-10/configuration#collect-buyer-consent) to be rendered. 

  The library automatically applies the [WAI-ARIA Dialog pattern](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/) to both the activator and the sheet content.
api_version: 2025-10
api_name: checkout-ui-extensions
source_url:
  html: https://shopify.dev/docs/api/checkout-ui-extensions/latest/components/sheet
  md: https://shopify.dev/docs/api/checkout-ui-extensions/latest/components/sheet.md
---

# Sheet

Requires configuration of the [Customer Privacy](https://shopify.dev/docs/api/checkout-ui-extensions/latest/configuration#collect-buyer-consent) capability to be rendered.

The Sheet component displays essential information for customers at the bottom of the screen, appearing above other elements. Use it sparingly to avoid distracting customers during checkout. This component requires access to [Customer Privacy API](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/configuration#collect-buyer-consent) to be rendered.

The library automatically applies the [WAI-ARIA Dialog pattern](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/) to both the activator and the sheet content.

## Properties

* accessibilityLabel

  string

  A label that describes the purpose of the modal. When set, it will be announced to users using assistive technologies and will provide them with more context.

  This overrides the `heading` prop for screen readers.

* defaultOpen

  boolean

  Default: false

  Indicates whether the Sheet should be open by default. This property is necessary in some cases, but its usage is generally discouraged due to potential negative impacts on user experience.

  Developers should:

  * Only set this property to true when there are vitally important behaviors of the application that depend on the user interacting with the sheet.
  * Make every effort to conditionally hide the sheet based on the state of checkout. An explicit example is custom privacy consent, where the sheet should only be displayed when consent is necessary and has not yet been explicitly given by the user.

  This property is useful for when the Sheet needs to be rendered on the page load and not triggered by a user action. The property should only take effect when the `Sheet` is rendered for the first time. To toggle the Sheet after it has been rendered, use the `ui.showOverlay()` method instead.

* heading

  string

  A title that describes the content of the sheet.

* id

  string

  A unique identifier for the element.

## Events

* afterhide

  ((event: CallbackEventListener\<typeof tagName>) => void) | null

  Callback fired when the overlay is hidden **after** any animations to hide the overlay have finished.

* aftershow

  ((event: CallbackEventListener\<typeof tagName>) => void) | null

  Callback fired when the overlay is shown **after** any animations to show the overlay have finished.

* hide

  ((event: CallbackEventListener\<typeof tagName>) => void) | null

  Callback fired after the overlay is hidden.

* show

  ((event: CallbackEventListener\<typeof tagName>) => void) | null

  Callback fired after the overlay is shown.

### CallbackEventListener

```ts
(EventListener & {
    (event: CallbackEvent<TTagName, TEvent>): void;
}) | null
```

### CallbackEvent

```ts
TEvent & {
    currentTarget: HTMLElementTagNameMap[TTagName];
}
```

## Slots

* primary-action

  HTMLElement

  The primary action to perform, provided as a button type element.

* secondary-actions

  HTMLElement

  The secondary actions to perform, provided as a button type element.

## Methods

* hideOverlay

  () => void

  required

  Method to hide an overlay.

### Examples

* #### Code

  ##### Default

  ```html
  <!-- This component requires access to Customer Privacy API to be rendered. -->
  <s-button commandFor="consent-sheet">Open Sheet</s-button>
  <s-sheet id="consent-sheet" heading="Sheet" accessibilityLabel="A sheet with text content">
    <s-text>Sheet Content</s-text>
  </s-sheet>
  ```

## Preview

![](https://shopify.dev/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/sheet-default.png)

## Shopify-controlled surfaces

To prevent disruptions during checkout, we maintain strict design control over key areas of the Sheet component. These Shopify-controlled elements include:

### Locations of elements

The Sheet elements (header, content, action buttons, and dismiss button) are strategically positioned and sized to present vital information upfront.

![Locations of header and content](https://shopify.dev/images/landing-pages/templated-apis/checkout-ui-extensions/ui-components/sheet-controlled-surfaces1.png) ![Locations of dismiss button and actions](https://shopify.dev/images/landing-pages/templated-apis/checkout-ui-extensions/ui-components/sheet-controlled-surfaces2.png)

### Padding and spacing

![Padding and spacing](https://shopify.dev/images/landing-pages/templated-apis/checkout-ui-extensions/ui-components/sheet-controlled-surfaces3.png)

### Maximum height

To balance customer attention and task completion, a maximum height is set for the Sheet component.

![Small screen maximum height](https://shopify.dev/images/landing-pages/templated-apis/checkout-ui-extensions/ui-components/sheet-controlled-surfaces4.png) ![Large screen maximum height](https://shopify.dev/images/landing-pages/templated-apis/checkout-ui-extensions/ui-components/sheet-controlled-surfaces5.png)

When content pushes the sheet to exceed this limit, the following UI behaviors are triggered:



### Heading and content are scrollable

![Heading and content are scrollable](https://shopify.dev/images/landing-pages/templated-apis/checkout-ui-extensions/ui-components/sheet-controlled-surfaces6.png)

### Expand pill appears to allow customers to view the entire content

![Expand pill to allow maximum height](https://shopify.dev/images/landing-pages/templated-apis/checkout-ui-extensions/ui-components/sheet-controlled-surfaces7.png)

### Actions slot and dismiss button remain fixed

![Actions slot and dismiss button remain fixed](https://shopify.dev/images/landing-pages/templated-apis/checkout-ui-extensions/ui-components/sheet-controlled-surfaces8.png)

## Privacy consent requirements

### Content

For the best customer experience, ensure content is brief and to the point.

![Shows content that is brief and to the point](https://shopify.dev/images/landing-pages/templated-apis/checkout-ui-extensions/ui-components/sheet-content-recommendations1.png)

Various strategies can be employed to avoid content scrolling.



#### Use short content

![Use short content](https://shopify.dev/images/landing-pages/templated-apis/checkout-ui-extensions/ui-components/sheet-content-recommendations2.png)

#### Use small text size

![Use small text size](https://shopify.dev/images/landing-pages/templated-apis/checkout-ui-extensions/ui-components/sheet-content-recommendations3.png)

#### Remove the header

![Remove the header](https://shopify.dev/images/landing-pages/templated-apis/checkout-ui-extensions/ui-components/sheet-content-recommendations4.png)

### Actions slot

The actions slots allows customers to make decisions and is split into primary and secondary sections.

![Actions slot](https://shopify.dev/images/landing-pages/templated-apis/checkout-ui-extensions/ui-components/sheet-content-recommendations5.png)

### Primary section

Contains primary actions for customer decisions on the sheet's prompt. Up to two buttons are allowed. Keep the button's content brief so that it doesn't wrap to more than one line.

![Primary section](https://shopify.dev/images/landing-pages/templated-apis/checkout-ui-extensions/ui-components/sheet-content-recommendations6.png)

### Secondary section

Contains action that is unrelated to the sheet's prompt. Only one button is allowed. A modal can be activated when engaging with the secondary action. Keep the button's content brief so that it doesn't wrap to more than one line.

![Secondary section](https://shopify.dev/images/landing-pages/templated-apis/checkout-ui-extensions/ui-components/sheet-content-recommendations7.png)

### Consent, denial of consent, and sheet dismissal

#### Consent

When a customer expresses consent by pressing the acceptance button, cookies will load and the sheet should not re-appear on refresh.



#### Denial of consent

When a customer expresses denial of consent by pressing the rejection button, cookies will not load and the sheet will not re-appear on refresh.



#### Sheet dismissal

When a customer neither grants nor denies consent by pressing the dismiss button, cookies will not load and the sheet will re-appear on refresh.

![Sheet dismissal](https://shopify.dev/images/landing-pages/templated-apis/checkout-ui-extensions/ui-components/sheet-content-recommendations8.png)