Dialog and Sheet

Edit on GitHub

Modal overlays for confirmations, selections, and supplementary content. Available as centered dialogs or side-anchored sheets.

@volvo-cars/css v2.5.1@volvo-cars/react-headless v0.25.1

Dialog Small Example

Show codeHide code

import { useDialog } from '@volvo-cars/react-headless';
import { IconButton } from '@volvo-cars/react-icons';

export function DialogSmallExample() {
  const { dialogProps, showDialog, closeDialog } = useDialog();

  return (
    <>
      <button type="button" className="button-filled" onClick={showDialog}>
        Open small dialog
      </button>
      <dialog className="dialog-small" {...dialogProps}>
        <div slot="close">
          <IconButton
            bleed
            icon="x"
            aria-label="Close"
            variant="clear"
            onClick={closeDialog}
          />
        </div>
        <article className="stack-text" slot="main">
          <h2 className="font-16 font-medium">
            Are you sure you want to proceed?
          </h2>
          <p className="text-secondary">
            All associated data will be permanently deleted and you will not be
            able to recover it.
          </p>
          <div className="button-group">
            <button
              type="button"
              className="button-filled"
              data-color="subtle"
              onClick={closeDialog}
            >
              Cancel
            </button>
            <button
              type="button"
              className="button-filled"
              onClick={closeDialog}
            >
              Continue
            </button>
          </div>
        </article>
      </dialog>
    </>
  );
}

Sheet Example

Show codeHide code

import { useDialog } from '@volvo-cars/react-headless';
import { IconButton } from '@volvo-cars/react-icons';

export function SheetExample() {
  const { dialogProps, showDialog, closeDialog } = useDialog();

  return (
    <>
      <button type="button" className="button-filled" onClick={showDialog}>
        Open sheet
      </button>
      <dialog className="sheet" {...dialogProps} data-anchor="end">
        <header slot="header">
          <div slot="close">
            <IconButton
              bleed
              icon="x"
              aria-label="Close"
              variant="clear"
              onClick={closeDialog}
            />
          </div>
          <h2 className="font-16">Equipment level</h2>
        </header>
        <article className="stack-text" slot="main">
          <h3 className="heading-2">Ultra</h3>
          <p>
            Experience the highest equipment level for optimum comfort, advanced
            connectivity and outstanding Scandinavian style.
          </p>
          <p>
            Includes premium sound system, head-up display, and full leather
            interior with ventilated seats.
          </p>
        </article>
        <footer slot="footer">
          <div className="button-group justify-end">
            <button
              type="button"
              className="button-filled"
              data-color="subtle"
              onClick={closeDialog}
            >
              Cancel
            </button>
            <button
              type="button"
              className="button-filled"
              onClick={closeDialog}
            >
              Compare
            </button>
          </div>
        </footer>
      </dialog>
    </>
  );
}

Sheet Anchor Start

Show codeHide code

import { useDialog } from '@volvo-cars/react-headless';
import { IconButton } from '@volvo-cars/react-icons';

export function SheetAnchorStart() {
  const { dialogProps, showDialog, closeDialog } = useDialog();

  return (
    <>
      <button type="button" className="button-filled" onClick={showDialog}>
        Open start-anchored sheet
      </button>
      <dialog className="sheet" {...dialogProps} data-anchor="start">
        <header slot="header">
          <div slot="close">
            <IconButton
              icon="x"
              bleed
              aria-label="Close"
              variant="clear"
              onClick={closeDialog}
            />
          </div>
          <h2 className="font-16">Navigation</h2>
        </header>
        <article slot="main" className="stack-16">
          <p>
            Set <code>data-anchor=&quot;start&quot;</code> to anchor the sheet
            to the inline-start side of the viewport. The default anchor is{' '}
            <code>end</code>.
          </p>
        </article>
      </dialog>
    </>
  );
}

Dialog Full Bleed

Show codeHide code

import { useDialog } from '@volvo-cars/react-headless';
import { IconButton } from '@volvo-cars/react-icons';

export function DialogFullBleed() {
  const { dialogProps, showDialog, closeDialog } = useDialog();

  return (
    <>
      <button type="button" className="button-filled" onClick={showDialog}>
        Open dialog
      </button>
      <dialog className="dialog-large" {...dialogProps}>
        <header slot="header">
          <div slot="close">
            <IconButton
              bleed
              icon="x"
              aria-label="Close"
              variant="clear"
              onClick={closeDialog}
            />
          </div>
          <h2 className="font-16">Gallery</h2>
        </header>
        <article slot="main" className="stack-24">
          <p>Content within the default padding.</p>
          <img
            data-bleed="true"
            src="/images/wheels.webp"
            className="img"
            alt="18 inch 8 spoke aero wheels in silver metallic finish"
          />
          <p>More content after the full-bleed image.</p>
        </article>
        <footer slot="footer">
          <div className="button-group justify-end">
            <button
              type="button"
              className="button-filled"
              onClick={closeDialog}
            >
              Done
            </button>
          </div>
        </footer>
      </dialog>
    </>
  );
}