Choose a version:

Sheet

Requires configuration of the 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.

Sheets support a heading, scrollable body content, and action slots for primary and secondary buttons. The library automatically applies the WAI-ARIA Dialog pattern to both the activator and the sheet content.

Sheet requires the collect_buyer_consent 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

Anchor to PropertiesProperties

Configure the following properties on the sheet component.

Anchor to accessibilityLabel 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.
Anchor to defaultOpen 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.
Anchor to heading heading string: A title that describes the content of the sheet.
Anchor to id 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.

Anchor to EventsEvents

The sheet component provides event callbacks for handling user interactions. Learn more about handling events.

Anchor to afterhide afterhide <typeof tagName>: A callback fired when the sheet is hidden, after any hide animations have completed.
Anchor to aftershow aftershow <typeof tagName>: A callback fired when the sheet is shown, after any show animations have completed.
Anchor to hide hide <typeof tagName>: A callback fired immediately after the sheet is hidden.
Anchor to show show <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.

(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.

TEvent & {
  currentTarget: HTMLElementTagNameMap[TTagName];
}

Anchor to SlotsSlots

The sheet component supports slots for additional content placement within the component. Learn more about using slots.

Anchor to primary-action 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.
Anchor to secondary-actions secondary-actions HTMLElement: Additional action buttons displayed in the sheet footer, providing alternative or supporting actions.

Anchor to MethodsMethods

The sheet component exposes methods for programmatic control.

Anchor to hideOverlay hideOverlay () => void required: A method to programmatically hide the overlay and run any associated hide animations.

Anchor to ExamplesExamples

Anchor to Collect customer consentCollect 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.

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>

Anchor to Present privacy policyPresent 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

<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>

Anchor to Notify data sale opt-outNotify 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

<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>

Anchor to Best practicesBest 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).

Was this page helpful?