---
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.
api_version: 2026-04
api_name: customer-account-ui-extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/overlays/sheet
  md: >-
    https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/overlays/sheet.md
---

# Sheet

**Requires configuration of the \[\`collect\_buyer\_consent\`]\(/docs/api/customer-account-ui-extensions/latest#configuration) 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.

Sheets support a heading, scrollable body content, and action slots for primary and secondary buttons. 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.

Sheet requires the [`collect_buyer_consent`](https://shopify.dev/docs/api/customer-account-ui-extensions/latest#configuration) capability and is intended for consent-related use cases — it might not render in other contexts. Element positions, padding, spacing, and maximum height are controlled by Shopify.

### Support Targets (24)

### Supported targets

* [customer-account.​footer.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/footer#footer-render-after-)
* [customer-account.​order-index.​announcement.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-actions#order-index-announcement-)
* [customer-account.​order-index.​block.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-actions#order-index-block-)
* [customer-account.​order-status.​announcement.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-status#order-status-announcement-)
* [customer-account.​order-status.​block.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-status#order-status-block-)
* [customer-account.​order-status.​cart-line-item.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-status#cart-line-item-render-after-)
* [customer-account.​order-status.​cart-line-list.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-status#cart-line-list-render-after-)
* [customer-account.​order-status.​customer-information.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-status#customer-information-render-after-)
* [customer-account.​order-status.​fulfillment-details.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/fulfillment-status#fulfillment-status-targets)
* [customer-account.​order-status.​payment-details.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/payments-and-returns#payments-and-returns-targets)
* [customer-account.​order-status.​return-details.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/payments-and-returns#return-details-render-after-)
* [customer-account.​order-status.​unfulfilled-items.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/fulfillment-status#unfulfilled-items-render-after-)
* [customer-account.​order.​action.​menu-item.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-actions#order-action-menu-item-)
* [customer-account.​order.​action.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-actions#order-action-)
* [customer-account.​order.​page.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/full-page#order-specific-full-page-)
* [customer-account.​page.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/full-page#customer-account-full-page-)
* [customer-account.​profile.​addresses.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/profile-page-default#profile-page-default-targets-)
* [customer-account.​profile.​announcement.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/profile-page-default#profile-announcement-)
* [customer-account.​profile.​block.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/profile-page-default#profile-block-)
* [customer-account.​profile.​company-details.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/profile-page-b2b#profile-page-b2b-targets-)
* [customer-account.​profile.​company-location-addresses.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/profile-page-b2b#company-location-addresses-render-after-)
* [customer-account.​profile.​company-location-payment.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/profile-page-b2b#company-location-payment-render-after-)
* [customer-account.​profile.​company-location-staff.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/profile-page-b2b#company-location-staff-render-after-)
* customer-account.​profile.​payment.​render-after

#### Use cases

* **Privacy consent**: Collect customer consent for data collection, cookies, or tracking in compliance with privacy regulations.
* **Cookie preferences**: Let customers manage their cookie preferences with granular controls for different tracking categories.
* **Terms acceptance**: Present terms of service or policy updates that require customer acknowledgment before proceeding.
* **Essential notices**: Display critical information that requires customer attention, such as regional compliance notices.

***

## Properties

Configure the following properties on the sheet component.

* **accessibilityLabel**

  **string**

  A label that describes the purpose of the sheet, announced by assistive technologies. When set, screen readers will use this label instead of the `heading` to describe the sheet.

* **defaultOpen**

  **boolean**

  **Default: false**

  Whether the sheet should be open when it first renders. Use sparingly — only when the user must interact with the sheet before proceeding (for example, a privacy consent prompt). Only takes effect on the initial render.

* **heading**

  **string**

  A title that describes the content of the sheet.

* **id**

  **string**

  A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting.

### Events

The sheet component provides event callbacks for handling user interactions. Learn more about [handling events](https://shopify.dev/docs/api/polaris/using-polaris-web-components#handling-events).

* **afterhide**

  **CallbackEventListener\<typeof tagName>**

  A callback fired when the sheet is hidden, after any hide animations have completed.

* **aftershow**

  **CallbackEventListener\<typeof tagName>**

  A callback fired when the sheet is shown, after any show animations have completed.

* **hide**

  **CallbackEventListener\<typeof tagName>**

  A callback fired immediately after the sheet is hidden.

* **show**

  **CallbackEventListener\<typeof tagName>**

  A callback fired immediately after the sheet is shown.

### CallbackEventListener

A typed event listener for custom element events. The listener receives a \`CallbackEvent\` with the correct \`currentTarget\` type for the associated custom element tag.

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

### CallbackEvent

An event type that narrows the \`currentTarget\` to the specific HTML element associated with the custom element tag. This provides type-safe event handling in callback listeners.

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

### Slots

The sheet component supports slots for additional content placement within the component. Learn more about [using slots](https://shopify.dev/docs/api/polaris/using-polaris-web-components#slots).

* **primary-action**

  **HTMLElement**

  The main action button displayed in the sheet footer, representing the primary action users should take. Only accepts a single button component.

* **secondary-actions**

  **HTMLElement**

  Additional action buttons displayed in the sheet footer, providing alternative or supporting actions.

***

## Methods

The sheet component exposes methods for programmatic control.

* **hideOverlay**

  **() => void**

  **required**

  A method to programmatically hide the overlay and run any associated hide animations.

***

## Examples

### Collect customer consent

Display a sheet for collecting customer consent. This example presents cookie preferences with accept and reject buttons in the `primary-action` and `secondary-actions` slots.

## Collect customer consent

![A bottom sheet overlay with cookie consent text and Accept and Decline buttons.](https://shopify.dev/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/sheet-default-CXkL_g1Z.png)

## html

```html
<s-button commandFor="consent-sheet">Manage cookies</s-button>
<s-sheet id="consent-sheet" accessibilityLabel="Cookie consent">
  <s-text>We use cookies to improve your experience. Click "Accept" to accept our <s-link href="/policies/cookies">cookie policy</s-link>.</s-text>
  <s-button slot="secondary-actions">Decline</s-button>
  <s-button slot="primary-action">Accept</s-button>
</s-sheet>
```

### Present privacy policy

Let customers manage granular privacy settings. This example displays checkboxes for different cookie categories with save and cancel buttons, using `accessibilityLabel` to describe the sheet's purpose for screen readers.

## html

```html
<s-button commandFor="privacy-sheet">Privacy settings</s-button>
<s-sheet id="privacy-sheet" heading="Privacy settings" accessibilityLabel="Review and update your privacy settings">
  <s-stack gap="base">
    <s-paragraph>
      Review how we collect and use your data. You can update your preferences at any time.
    </s-paragraph>
    <s-checkbox label="Essential cookies (required)" checked></s-checkbox>
    <s-checkbox label="Analytics cookies"></s-checkbox>
    <s-checkbox label="Marketing cookies"></s-checkbox>
  </s-stack>
  <s-button
    slot="secondary-actions"
  >
    Cancel
  </s-button>
  <s-button
    variant="primary"
    slot="primary-action"
  >
    Save preferences
  </s-button>
</s-sheet>
```

### Notify data sale opt-out

Present a CCPA-style opt-out notice for customers in regions that require data sale controls. This example shows a sheet explaining the customer's rights with opt-out and cancel actions.

## html

```html
<s-button commandFor="ccpa-sheet">Do not sell my data</s-button>
<s-sheet id="ccpa-sheet" heading="Data sale opt-out" accessibilityLabel="Opt out of the sale of your personal data">
  <s-stack gap="base">
    <s-paragraph>
      Under the California Consumer Privacy Act (CCPA), you have the right to opt out of the sale of your personal information.
    </s-paragraph>
    <s-paragraph>
      Opting out means we won't share your data with third parties for monetary or other valuable consideration. This won't affect your account or order experience.
    </s-paragraph>
  </s-stack>
  <s-button
    slot="secondary-actions"
  >
    Cancel
  </s-button>
  <s-button
    variant="primary"
    slot="primary-action"
  >
    Opt out
  </s-button>
</s-sheet>
```

***

## Best practices

* **Limit to one sheet at a time**: Don't stack multiple sheets. If the workflow requires more than one decision, combine them or use a modal for the additional step.
* **Reserve for content that requires acknowledgment**: Sheets work best when customers need to actively respond before continuing, not for passive informational content.
* **Include clear actions**: Provide clear primary and secondary actions so customers understand their choices and can respond quickly. The `primary-action` slot supports up to two buttons, and the `secondary-actions` slot supports one button. Keep button labels brief so they don't wrap to more than one line.
* **Keep content concise**: Use short content, small text sizes, or remove the header to avoid scrolling. When content exceeds the maximum height, heading and content become scrollable while the actions slot and dismiss button remain fixed.
* **Provide an accessibility label**: Use `accessibilityLabel` when the sheet heading alone doesn't fully describe the purpose for screen readers.
* **Handle all consent outcomes**: When implementing consent flows, handle acceptance (cookies load, sheet doesn't re-appear), denial (cookies don't load, sheet doesn't re-appear), and dismissal (cookies don't load, sheet re-appears on refresh).

***