Modal

SfModal creates a modal window that opens on top of the main window. This component can be used to display important information that requires user interaction.

In addition to the UI aspect, SfModal adds additional functionality that implements several best practices:

Traps focus within the modal using the useTrapFocus function
Allows the user to close the modal by pressing the Escape key.
Allows the user to close the modal by clicking outside of it.

The closing behavior can be disabled by setting the disableClickAway/disableEsc prop to true.

Examples

Basic usage

The visibility of the modal is controlled by the open prop.

This example also uses the useDisclosure function to provide nice controls for handling the modal's visibility.

Animated

You can make smooth transitions when the modal pops up.

import { useId, useRef } from 'react';
import { CSSTransition } from 'react-transition-group';
import { SfModal, SfButton, SfIconClose, useDisclosure } from '@storefront-ui/react';

export default function ModalTransition() {
  const { isOpen, open, close } = useDisclosure({ initialValue: false });
  const headingId = useId();
  const descriptionId = useId();
  const modalRef = useRef<HTMLElement>(null);
  const backdropRef = useRef<HTMLDivElement>(null);

  return (
    <>
      <SfButton onClick={open}>To Checkout</SfButton>

      {/* Backdrop */}
      <CSSTransition
        in={isOpen}
        nodeRef={backdropRef}
        timeout={200}
        unmountOnExit
        classNames={{
          enter: 'opacity-0',
          enterDone: 'opacity-100 transition duration-200 ease-out',
          exitActive: 'opacity-0 transition duration-200 ease-out',
        }}
      >
        <div ref={backdropRef} className="fixed inset-0 bg-neutral-700 bg-opacity-50" />
      </CSSTransition>

      {/* Modal */}
      <CSSTransition
        in={isOpen}
        nodeRef={modalRef}
        timeout={200}
        unmountOnExit
        classNames={{
          enter: 'translate-y-10 opacity-0',
          enterDone: 'translate-y-0 opacity-100 transition duration-200 ease-out',
          exitActive: 'translate-y-10 opacity-0 transition duration-200 ease-out',
        }}
      >
        <SfModal
          open
          onClose={close}
          ref={modalRef}
          as="section"
          role="alertdialog"
          aria-labelledby={headingId}
          aria-describedby={descriptionId}
          className="max-w-[90%] md:max-w-lg"
        >
          <header>
            <SfButton square variant="tertiary" className="absolute right-2 top-2" onClick={close}>
              <SfIconClose />
            </SfButton>
            <h3 id={headingId} className="font-bold typography-headline-4 md:typography-headline-3">
              You might miss out on great deals
            </h3>
          </header>
          <p id={descriptionId} className="mt-2">
            There are special offers for some of the items on your wishlist. Do you want to see these deals before
            proceeding to checkout page?
          </p>
          <footer className="flex justify-end gap-4 mt-4">
            <SfButton variant="secondary" onClick={close}>
              Skip
            </SfButton>
            <SfButton onClick={close}>Yes!</SfButton>
          </footer>
        </SfModal>
      </CSSTransition>
    </>
  );
}

Accessibility notes

SfModal sets the aria-modal="true" attribute. Also, it sets the tabindex to -1 so Tab and Shift + Tab do not move focus outside the modal.

Since you may need to use this component in different contexts, there is no role attribute set by default. Make sure to add proper role based on your needs:

role="alertdialog" for dialogs where immediate user response is required. See details.
role="dialog" for generic dialogs. See details.

You should add aria-labelledby or aria-label attributes to provide an accessible label for your modal - usually this value can be the title of the modal. To add more context, you should use the aria-describedby or aria-description attributes.

Both techniques can be seen in the code examples above.

Modal

Examples

Basic usage

Animated

Accessibility notes

Playground