# Sheet
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/2024-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.
### Basic Sheet

```tsx
import {
  reactExtension,
  Link,
  Sheet,
  TextBlock,
} from '@shopify/ui-extensions-react/checkout';

// This component requires access to Customer Privacy API to be rendered.

export default reactExtension(
  'purchase.checkout.block.render',
  () => <Extension />,
);

function Extension() {
  return (
    <Link
      overlay={
        <Sheet
          id="basic-sheet"
          heading="Basic Sheet"
          accessibilityLabel="A sheet with text content"
        >
          <TextBlock>
            Basic Sheet Content
          </TextBlock>
        </Sheet>
      }
    >
      Open sheet
    </Link>
  );
}

```

```js
import {
  extension,
  Link,
  Sheet,
  TextBlock,
} from '@shopify/ui-extensions/checkout';

// This component requires access to Customer Privacy API to be rendered.

export default extension('purchase.checkout.block.render', (root) => {
  const sheetFragment = root.createFragment();
  const sheet = root.createComponent(
    Sheet,
    {
      id: 'basic-sheet',
      heading: 'Basic Sheet',
      accessibilityLabel: 'A sheet with text content',
    },
    [root.createComponent(TextBlock, undefined, 'Basic Sheet Content')],
  );
  sheetFragment.appendChild(sheet);
  const link = root.createComponent(
    Link,
    {overlay: sheetFragment},
    'Open sheet',
  );

  root.appendChild(link);
});

```


## SheetProps

### SheetProps

### accessibilityLabel
A label to describe the purpose of the sheet that is announced by screen readers. If not set, it will use the value of `heading`.
### defaultOpen
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.
### heading
A heading rendered at the top of the sheet.
### id
A unique identifier for the component.
### onHide
Callback fired when the sheet is closed.
### onShow
Callback fired when the sheet is opened.
### primaryAction
The primary action to perform, provided as a `Button` component. The property allows up to two buttons to be rendered.
### secondaryAction
The secondary action to perform, provided as a `Button` component. The property allows only one button to be rendered.
## Related
- [Ui](ui)
## Examples
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/2024-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.
### 
The Sheet component can be used to display privacy consent preferences in the Checkout interface. Sheet can be defaulted to open for this use case.

 This component requires access to [Customer Privacy API](/docs/api/checkout-ui-extensions/2024-10/apis/customer-privacy) to be rendered.
### Using Sheet to display consent preferences

```jsx
import {
  reactExtension,
  Button,
  Link,
  Sheet,
  TextBlock,
  useApi,
  useCustomerPrivacy,
} from '@shopify/ui-extensions-react/checkout';

export default reactExtension(
  'purchase.checkout.footer.render-after',
  () => <Extension />,
);

function Extension() {
  const {applyTrackingConsentChange, ui} =
    useApi();

  const {shouldShowBanner} = useCustomerPrivacy();

  const sheetId = 'sheet-consent';

  const handleConsentChange = async ({
    analytics,
    marketing,
    preferences,
    saleOfData,
  }) => {
    try {
      const result =
        await applyTrackingConsentChange({
          type: 'changeVisitorConsent',
          analytics,
          marketing,
          preferences,
          saleOfData,
        });

      // Check if operation was successful
      if (result.type === 'success') {
        ui.overlay.close(sheetId);
      } else {
        // Handle failure case here
      }
    } catch (error) {
      // Handle error case here
    }
  };

  return (
    <Sheet
      id={sheetId}
      heading="We value your privacy"
      accessibilityLabel="A sheet that collects privacy consent preferences"
      defaultOpen={shouldShowBanner}
      primaryAction={
        <>
          <Button
            kind="secondary"
            onPress={() =>
              handleConsentChange({
                // values derived from local form state
                analytics: false,
                marketing: false,
                preferences: false,
                saleOfData: false,
              })
            }
          >
            I decline
          </Button>
          <Button
            kind="secondary"
            onPress={() =>
              handleConsentChange({
                analytics: true,
                marketing: true,
                preferences: true,
                saleOfData: true,
              })
            }
          >
            I agree
          </Button>
        </>
      }
      secondaryAction={
        <Button
          kind="plain"
          overlay={
            // Open a settings modal
          }
        >
          Settings
        </Button>
      }
    >
      <TextBlock>
        This website uses cookies to ensure you
        get the best experience on our website.
        <Link>Privacy Policy</Link>
      </TextBlock>
    </Sheet>
  );
}

```

```js
import {
  extension,
  Sheet,
  Button,
  Link,
  TextBlock,
} from '@shopify/ui-extensions/checkout';

export default extension(
  'purchase.checkout.footer.render-after',
  (
    root,
    {
      applyTrackingConsentChange,
      customerPrivacy,
      ui,
    },
  ) => {
    customerPrivacy.subscribe(
      ({shouldShowBanner}) => {
        const primaryFragment =
          root.createFragment();
        const secondaryFragment =
          root.createFragment();
        const handleConsentChange = async ({
          analytics,
          marketing,
          preferences,
          saleOfData,
        }) => {
          try {
            const result =
              await applyTrackingConsentChange({
                type: 'changeVisitorConsent',
                analytics,
                marketing,
                preferences,
                saleOfData,
              });

            // Check if operation was successful
            if (result) {
              ui.overlay.close(sheetId);
            } else {
              // Handle failure case here
            }
          } catch (error) {
            // Handle error case here
          }
        };

        const declineButton =
          root.createComponent(
            Button,
            {
              kind: 'secondary',
              onPress: () =>
                handleConsentChange({
                  analytics: false,
                  marketing: false,
                  preferences: false,
                  saleOfData: false,
                }),
            },
            'I decline',
          );

        const agreeButton = root.createComponent(
          Button,
          {
            kind: 'secondary',
            onPress: () =>
              handleConsentChange({
                analytics: true,
                marketing: true,
                preferences: true,
                saleOfData: true,
              }),
          },
          'I agree',
        );

        const settingsButton =
          root.createComponent(
            Button,
            {
              kind: 'secondary',
            },
            'Settings',
          );

        primaryFragment.appendChild(
          declineButton,
        );
        primaryFragment.appendChild(agreeButton);
        secondaryFragment.appendChild(
          settingsButton,
        );

        const sheetId = 'sheet-consent';
        const sheet = root.createComponent(
          Sheet,
          {
            id: sheetId,
            heading: 'We value your privacy',
            accessibilityLabel:
              'A sheet that collects privacy consent preferences',
            defaultOpen: shouldShowBanner,
            primaryAction: primaryFragment,
            secondaryAction: secondaryFragment,
          },
        );

        const textBlock = root.createComponent(
          TextBlock,
          null,
          [
            'We and our partners use cookies and other technologies to improve your experience, measure performance, and tailor marketing. Details in our ',
            root.createComponent(
              Link,
              null,
              'Privacy Policy',
            ),
          ],
        );

        sheet.appendChild(textBlock);
        root.appendChild(sheet);
      },
    );
  },
);

```


### 
In order to save space in the action slot, secondary actions can be placed in the content area.
### Preferences button is in the description as a link

```jsx
import {
  reactExtension,
  Button,
  BlockStack,
  Link,
  Sheet,
  TextBlock,
  useCustomerPrivacy,
} from '@shopify/ui-extensions-react/checkout';

export default reactExtension(
  'purchase.checkout.footer.render-after',
  () => <Extension />,
);

function Extension() {
  const {shouldShowBanner} = useCustomerPrivacy();

  const sheetId = 'sheet-consent';

  return (
    <Sheet
      id={sheetId}
      accessibilityLabel="A sheet that collects privacy consent preferences"
      defaultOpen={shouldShowBanner}
      primaryAction={
        <>
          <Button
            kind="secondary"
            onPress={() => {}}
          >
            I decline
          </Button>
          <Button
            kind="secondary"
            onPress={() => {}}
          >
            I agree
          </Button>
        </>
      }
    >
      <BlockStack spacing="none">
        <TextBlock>
          This website uses cookies to ensure you
          get the best experience on our website.
        </TextBlock>
        <TextBlock>
          <Link>Privacy Policy</Link> ‧{' '}
          <Link>Cookie Policy</Link> ‧{' '}
          <Link
          // overlay: <Modal>Preferences modal...</Modal>,
          >
            Preferences
          </Link>
        </TextBlock>
      </BlockStack>
    </Sheet>
  );
}

```

```js
import {
  extension,
  Sheet,
  Button,
  Link,
  TextBlock,
  BlockStack,
} from '@shopify/ui-extensions/checkout';

export default extension(
  'purchase.checkout.footer.render-after',
  (root, {customerPrivacy}) => {
    const primaryFragment = root.createFragment();

    const declineButton = root.createComponent(
      Button,
      {
        kind: 'secondary',
        onPress: () => {},
      },
      'I decline',
    );

    const agreeButton = root.createComponent(
      Button,
      {
        kind: 'secondary',
        onPress: () => {},
      },
      'I agree',
    );

    primaryFragment.appendChild(declineButton);
    primaryFragment.appendChild(agreeButton);

    const sheetId = 'sheet-consent';
    const sheet = root.createComponent(Sheet, {
      id: sheetId,
      accessibilityLabel:
        'A sheet that collects privacy consent preferences',
      defaultOpen:
        customerPrivacy.current.shouldShowBanner,
      primaryAction: primaryFragment,
    });

    const textBlock = root.createComponent(
      TextBlock,
      null,
      'This website uses cookies to ensure you get the best experience on our website.',
    );

    const linkBlock = root.createComponent(
      TextBlock,
      null,
      [
        root.createComponent(
          Link,
          null,
          'Privacy Policy',
        ),
        ' ‧ ',
        root.createComponent(
          Link,
          null,
          'Cookie Policy',
        ),
        ' ‧ ',
        root.createComponent(
          Link,
          {
            // overlay: <Modal>Preferences modal...</Modal>,,
          },
          'Preferences',
        ),
      ],
    );

    const blockStack = root.createComponent(
      BlockStack,
      {spacing: 'none'},
      [textBlock, linkBlock],
    );
    sheet.appendChild(blockStack);
    root.appendChild(sheet);
  },
);

```


### 
An icon button can be used in the secondary actions area to allow for more space for the primary actions.
### Icon button used for preferences

```jsx
import {
  reactExtension,
  Button,
  Link,
  Icon,
  Sheet,
  TextBlock,
  useCustomerPrivacy,
} from '@shopify/ui-extensions-react/checkout';

export default reactExtension(
  'purchase.checkout.footer.render-after',
  () => <Extension />,
);

function Extension() {
  const {shouldShowBanner} = useCustomerPrivacy();

  return (
    <Sheet
      accessibilityLabel="A sheet that collects privacy consent preferences"
      heading="We value your privacy"
      defaultOpen={shouldShowBanner}
      primaryAction={
        <>
          <Button
            kind="secondary"
            onPress={() => {}}
          >
            I decline
          </Button>
          <Button
            kind="secondary"
            onPress={() => {}}
          >
            I agree
          </Button>
        </>
      }
      secondaryAction={
        <Button
          kind="secondary"
          onPress={() => {}}
        >
          <Icon source="settings" />
        </Button>
      }
    >
      <TextBlock>
        This website uses cookies to ensure you
        get the best experience on our website.{' '}
        <Link>Privacy Policy</Link>.
      </TextBlock>
    </Sheet>
  );
}

```

```js
import {
  extension,
  Sheet,
  Button,
  Link,
  TextBlock,
  Icon,
} from '@shopify/ui-extensions/checkout';

export default extension(
  'purchase.checkout.footer.render-after',
  (root, {customerPrivacy}) => {
    const primaryFragment = root.createFragment();
    const secondaryFragment =
      root.createFragment();

    const declineButton = root.createComponent(
      Button,
      {
        kind: 'secondary',
        onPress: () => {},
      },
      'I decline',
    );

    const agreeButton = root.createComponent(
      Button,
      {
        kind: 'secondary',
        onPress: () => {},
      },
      'I agree',
    );

    const preferencesButton =
      root.createComponent(
        Button,
        {
          kind: 'secondary',
        },
        root.createComponent(Icon, {
          source: 'settings',
        }),
      );

    primaryFragment.appendChild(declineButton);
    primaryFragment.appendChild(agreeButton);
    secondaryFragment.appendChild(
      preferencesButton,
    );

    const sheet = root.createComponent(Sheet, {
      accessibilityLabel:
        'A sheet that collects privacy consent preferences',
      defaultOpen:
        customerPrivacy.current.shouldShowBanner,
      primaryAction: primaryFragment,
      secondaryAction: secondaryFragment,
    });

    const textBlock = root.createComponent(
      TextBlock,
      null,
      [
        'This website uses cookies to ensure you get the best experience on our website. ',
        root.createComponent(
          Link,
          null,
          'Privacy Policy',
        ),
      ],
    );

    sheet.appendChild(textBlock);
    root.appendChild(sheet);
  },
);

```


### 
The description can take in layout components to allow for different types of content to be structured in specific ways.
### Using layout component in the description 

```jsx
import {
  reactExtension,
  Button,
  Link,
  Image,
  InlineLayout,
  Sheet,
  TextBlock,
  useCustomerPrivacy,
} from '@shopify/ui-extensions-react/checkout';

export default reactExtension(
  'purchase.checkout.footer.render-after',
  () => <Extension />,
);

function Extension() {
  const {shouldShowBanner} = useCustomerPrivacy();

  return (
    <Sheet
      accessibilityLabel="A sheet that collects privacy consent preferences"
      defaultOpen={shouldShowBanner}
      primaryAction={
        <>
          <Button
            kind="secondary"
            onPress={() => {}}
          >
            I decline
          </Button>
          <Button
            kind="secondary"
            onPress={() => {}}
          >
            I agree
          </Button>
        </>
      }
      secondaryAction={
        <Button kind="plain" onPress={() => {}}>
          Preferences
        </Button>
      }
    >
      <InlineLayout
        padding="none"
        spacing="small100"
        columns={[38, 'fill']}
      >
        <Image source="https://yourawesomeimage.com" />
        <TextBlock>
          This website uses cookies to ensure you
          get the best experience on our website.{' '}
          <Link>Learn more</Link>.
        </TextBlock>
      </InlineLayout>
    </Sheet>
  );
}

```

```js
import {
  extension,
  Sheet,
  Button,
  Link,
  TextBlock,
  Image,
  InlineLayout,
} from '@shopify/ui-extensions/checkout';

export default extension(
  'purchase.checkout.footer.render-after',
  (root, {customerPrivacy}) => {
    const primaryFragment = root.createFragment();
    const secondaryFragment =
      root.createFragment();

    const declineButton = root.createComponent(
      Button,
      {
        kind: 'secondary',
        onPress: () => {},
      },
      'I decline',
    );

    const agreeButton = root.createComponent(
      Button,
      {
        kind: 'secondary',
        onPress: () => {},
      },
      'I agree',
    );

    const preferencesButton =
      root.createComponent(
        Button,
        {
          kind: 'plain',
        },
        'Preferences',
      );

    primaryFragment.appendChild(declineButton);
    primaryFragment.appendChild(agreeButton);
    secondaryFragment.appendChild(
      preferencesButton,
    );

    const sheet = root.createComponent(Sheet, {
      accessibilityLabel:
        'A sheet that collects privacy consent preferences',
      defaultOpen:
        customerPrivacy.current.shouldShowBanner,
      primaryAction: primaryFragment,
      secondaryAction: secondaryFragment,
    });

    const textBlock = root.createComponent(
      TextBlock,
      null,
      [
        'This website uses cookies to ensure you get the best experience on our website.',
        root.createComponent(
          Link,
          null,
          'Learn more',
        ),
      ],
    );

    const inlineLayout = root.createComponent(
      InlineLayout,
      {
        padding: 'none',
        spacing: 'small100',
        columns: [38, 'fill'],
      },
      [
        root.createComponent(Image, {
          source: 'https://yourawesomeimage.com',
        }),
        textBlock,
      ],
    );

    sheet.appendChild(inlineLayout);
    root.appendChild(sheet);
  },
);

```