OLYSENSE Design System

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Close

Open Dialog

<ods-dialog label="Dialog" class="dialog-overview">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  <ods-button slot="footer" variant="primary">Close</ods-button>
</ods-dialog>

<ods-button variant="primary">Open Dialog</ods-button>

<script>
  const dialog = document.querySelector('.dialog-overview');
  const openButton = dialog.nextElementSibling;
  const closeButton = dialog.querySelector('ods-button[slot="footer"]');

  openButton.addEventListener('click', () => dialog.show());
  closeButton.addEventListener('click', () => dialog.hide());
</script>

import { useState } from 'react';
import { OdsButton } from '@ods/components/react.button';
import { OdsDialog } from '@ods/components/react.dialog';

const Example = () => {
  const [open, setOpen] = useState(false);

  return (
    <>
      <OdsDialog
        label="Dialog"
        open={open}
        onOdsDialogAfterHide={() => setOpen(false)}>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        <OdsButton
          slot="footer"
          variant="primary"
          onClick={() => setOpen(false)}>
          Close
        </OdsButton>
      </OdsDialog>

      <OdsButton variant="primary" onClick={() => setOpen(true)}>Open Dialog</OdsButton>
    </>
  );
}

export default Example;

Use the —width custom property to set the dialog’s width.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Close

Open Dialog

<ods-dialog label="Dialog" class="custom-width">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  <ods-button slot="footer" variant="primary">Close</ods-button>
</ods-dialog>

<ods-button variant="primary">Open Dialog</ods-button>

<script>
  const dialogCustomWidth = document.querySelector('.custom-width');
  const openButtonCustomWidth = dialogCustomWidth.nextElementSibling;
  const closeButtonCustomWidth = dialogCustomWidth.querySelector('ods-button[slot="footer"]');

  openButtonCustomWidth.addEventListener('click', () => dialogCustomWidth.show());
  closeButtonCustomWidth.addEventListener('click', () => dialogCustomWidth.hide());
</script>

<style>
  .custom-width {
    --width: 50vw;
  }
</style>

import { useState } from 'react';
import { OdsButton } from '@ods/components/react.button';
import { OdsDialog } from '@ods/components/react.dialog';

const css = `
  .custom-width {
    --width: 50vw;
  }
`;

const Example = () => {
  const [open, setOpen] = useState(false);

  return (
    <>
      <OdsDialog
        label="Dialog"
        open={open}
        className="custom-width"
        onOdsDialogAfterHide={() => setOpen(false)}>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        <OdsButton slot="footer" variant="primary" onClick={() => setOpen(false)}>
          Close
        </OdsButton>
      </OdsDialog>

      <OdsButton variant="primary" onClick={() => setOpen(true)}>Open Dialog</OdsButton>

      <style>
        {css}
      </style>
    </>
  );
}

export default Example;

By design, a dialog’s height will never exceed that of the viewport. As such, dialogs will not scroll with the page ensuring the header and footer are always accessible to the user.

Scroll down and give it a try! 👇

Open Dialog

<ods-dialog label="Dialog" class="dialog-scrolling">
  <div class="dialog-wrapper">
    <p>Scroll down and give it a try! 👇</p>
  </div>
  <ods-button slot="footer" variant="primary">Close</ods-button>
</ods-dialog>

<ods-button variant="primary">Open Dialog</ods-button>

<script>
  const dialogScrolling = document.querySelector('.dialog-scrolling');
  const openButtonScrolling = dialogScrolling.nextElementSibling;
  const closeButtonScrolling = dialogScrolling.querySelector('ods-button[slot="footer"]');

  openButtonScrolling.addEventListener('click', () => dialogScrolling.show());
  closeButtonScrolling.addEventListener('click', () => dialogScrolling.hide());
</script>

<style>
  .dialog-wrapper {
    height: 150vh;
    border: dashed 2px var(--ods-sys-color-outline-base);
    padding: 0 1rem;
  }
</style>

import { useState } from 'react';
import { OdsButton } from '@ods/components/react.button';
import { OdsDialog } from '@ods/components/react.dialog';

const css = `
  .scrolling {
    height: 150vh;
    border: dashed 2px var(--ods-sys-color-outline-base);
    padding: 0 1rem;
  }
`;

const Example = () => {
  const [open, setOpen] = useState(false);

  return (
    <>
      <OdsDialog
        label="Dialog"
        open={open}
        onOdsDialogAfterHide={() => setOpen(false)}>

        <div className="scrolling">
          <p>Scroll down and give it a try! 👇</p>
        </div>

        <OdsButton
          slot="footer"
          variant="primary"
          onClick={() => setOpen(false)}>
          Close
        </OdsButton>
      </OdsDialog>

      <OdsButton variant="primary" onClick={() => setOpen(true)}>Open Dialog</OdsButton>

      <style>
        {css}
      </style>
    </>
  );
}

export default Example;

The header shows a functional close button by default. You can use the header-actions slot to add additional icon buttons if needed.

Open Dialog

<ods-dialog label="Dialog" class="dialog-header-actions">
  <ods-icon-button class="new-window" variant="ghost" slot="header-actions" name="export"></ods-icon-button>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  <ods-button slot="footer" variant="primary">Close</ods-button>
</ods-dialog>

<ods-button variant="primary">Open Dialog</ods-button>

<script>
  const dialogActions = document.querySelector('.dialog-header-actions');
  const openButtonActions = dialogActions.nextElementSibling;
  const closeButtonActions = dialogActions.querySelector('ods-button[slot="footer"]');
  const newWindowButtonActions = dialogActions.querySelector('.new-window');

  openButtonActions.addEventListener('click', () => dialogActions.show());
  closeButtonActions.addEventListener('click', () => dialogActions.hide());
  newWindowButtonActions.addEventListener('click', () => window.open(location.href));
</script>

import { useState } from 'react';
import { OdsButton } from '@ods/components/react.button';
import { OdsIconButton } from '@ods/components/react.icon-button';
import { OdsDialog } from '@ods/components/react.dialog';

const Example = () => {
  const [open, setOpen] = useState(false);

  return (
    <>
      <OdsDialog
        label="Dialog"
        open={open}
        onOdsDialogAfterHide={() => setOpen(false)}>
        <OdsIconButton
          className="new-window"
          variant="ghost"
          slot="header-actions"
          name="export"
          onClick={() => window.open(location.href)}
        />

        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        <OdsButton
          slot="footer"
          variant="primary"
          onClick={() => setOpen(false)}>
          Close
        </OdsButton>
      </OdsDialog>

      <OdsButton variant="primary" onClick={() => setOpen(true)}>Open Dialog</OdsButton>
    </>
  );
}

export default Example;

By default, dialogs will close when the user clicks the close button, clicks the overlay, or presses the Escape key. In most cases, the default behavior is the best behavior in terms of UX. However, there are situations where this may be undesirable, such as when data loss will occur.

To keep the dialog open in such cases, you can cancel the ods-request-close event. When canceled, the dialog will remain open and pulse briefly to draw the user’s attention to it.

You can use event.detail.source to determine what triggered the request to close. This example prevents the dialog from closing when the overlay is clicked, but allows the close button or Escape to dismiss it.

This dialog will not close when you click on the overlay. Close

Open Dialog

<ods-dialog label="Dialog" class="dialog-deny-close">
  This dialog will not close when you click on the overlay.
  <ods-button slot="footer" variant="primary">Close</ods-button>
</ods-dialog>

<ods-button variant="primary">Open Dialog</ods-button>

<script>
  const dialogPreventClosing = document.querySelector('.dialog-deny-close');
  const openButtonPreventClosing = dialogPreventClosing.nextElementSibling;
  const closeButtonPreventClosing = dialogPreventClosing.querySelector('ods-button[slot="footer"]');

  openButtonPreventClosing.addEventListener('click', () => dialogPreventClosing.show());
  closeButtonPreventClosing.addEventListener('click', () => dialogPreventClosing.hide());

  // Prevent the dialog from closing when the user clicks on the overlay
  dialogPreventClosing.addEventListener('ods-request-close', event => {
    if (event.detail.source === 'overlay') {
      event.preventDefault();
    }
  });
</script>

import { useState } from 'react';
import { OdsButton } from '@ods/components/react.button';
import { OdsDialog } from '@ods/components/react.dialog';
import { OdsRequestCloseEvent } from 'packages/design-system-components/src/web/events/sense-request-close';

const Example = () => {
  const [open, setOpen] = useState(false);

  // Prevent the dialog from closing when the user clicks on the overlay
  function handleRequestClose(event: OdsRequestCloseEvent) {
    if (event.detail.source === 'overlay') {
      event.preventDefault();
    }
  }

  return (
    <>
      <OdsDialog
        label="Dialog"
        open={open}
        onOdsDialogRequestClose={handleRequestClose}
        onOdsDialogAfterHide={() => setOpen(false)}>
        This dialog will not close when you click on the overlay.
        <OdsButton
          slot="footer"
          variant="primary"
          onClick={() => setOpen(false)}>
          Close
        </OdsButton>
      </OdsDialog>

      <OdsButton variant="primary" onClick={() => setOpen(true)}>Open Dialog</OdsButton>
    </>
  );
}

export default Example;

By default, the dialog’s panel will gain focus when opened. This allows a subsequent tab press to focus on the first tabbable element in the dialog. If you want a different element to have focus, add the autofocus attribute to it as shown below.

Open Dialog

<ods-dialog label="Dialog" class="dialog-focus">
  <ods-input autofocus placeholder="I will have focus when the dialog is opened"></ods-input>
  <ods-button slot="footer" variant="primary">Close</ods-button>
</ods-dialog>

<ods-button variant="primary">Open Dialog</ods-button>

<script>
  const dialogFocus = document.querySelector('.dialog-focus');
  const inputFocus = dialogFocus.querySelector('ods-input');
  const openButtonFocus = dialogFocus.nextElementSibling;
  const closeButtonFocus = dialogFocus.querySelector('ods-button[slot="footer"]');

  openButtonFocus.addEventListener('click', () => dialogFocus.show());
  closeButtonFocus.addEventListener('click', () => dialogFocus.hide());
</script>

import { useState } from 'react';
import { OdsButton } from '@ods/components/react.button';
import { OdsDialog } from '@ods/components/react.dialog';
import { OdsInput } from '@ods/components/react.input';

const Example = () => {
  const [open, setOpen] = useState(false);

  return (
    <>
      <OdsDialog
        label="Dialog"
        open={open}
        onOdsDialogAfterHide={() => setOpen(false)}>
        <OdsInput placeholder="I will have focus when the dialog is opened" autoFocus />
        <OdsButton
          slot="footer"
          variant="primary"
          onClick={() => setOpen(false)}>
          Close
        </OdsButton>
      </OdsDialog>

      <OdsButton variant="primary" onClick={() => setOpen(true)}>Open Dialog</OdsButton>
    </>
  );
}

export default Example;

Importing

import '@ods/components/web.dialog';

Note: You only need to import a web component once in your code, as it registers itself globally when defined, allowing you to use it anywhere within your application without needing to re-import it each time you want to use the component.

Slots

Name	Description
(default)	The dialog's main content.
label	The dialog's label. Alternatively, you can use the `label` attribute.
header-actions	Optional actions to add to the header. Works best with `<ods-icon-button>`.
footer	The dialog's footer, usually one or more buttons representing various options.

Properties

Please note, both DOM properties and HTML attributes are shown in the table below. Unless otherwise specified, the property and attribute names are identical.

Property/Attribute	Type	Default
modal		new Modal(this)
open	boolean	false
label	string	''
noHeader no-header	boolean	false

Events

React Event	Description	Event Detail
ods-dialog-show	Emitted when the dialog opens.	--
ods-dialog-after-show	Emitted after the dialog opens and all animations are complete.	--
ods-dialog-hide	Emitted when the dialog closes.	--
ods-dialog-after-hide	Emitted after the dialog closes and all animations are complete.	--
ods-dialog-initial-focus	Emitted when the dialog opens and is ready to receive focus. Calling `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input.	--
ods-dialog-request-close	Emitted when the user attempts to close the dialog by clicking the close button, clicking the overlay, or pressing escape. Calling `event.preventDefault()` will keep the dialog open. Avoid using this unless closing the dialog will result in destructive behavior such as data loss.	--

Methods

Name	Description	Arguments
show()	Shows the dialog.	--
hide()	Hides the dialog	--

Parts

Name	Description
base	The component's base wrapper.
overlay	The overlay that covers the screen behind the dialog.
panel	The dialog's panel (where the dialog and its content are rendered).
header	The dialog's header. This element wraps the title and header actions.
header-actions	Optional actions to add to the header. Works best with `<ods-icon-button>`.
title	The dialog's title.
close-button	The close button, an `<ods-icon-button>`.
close-button__base	The close button's exported `base` part.
body	The dialog's body.
footer	The dialog's footer.

Dependencies

This component automatically imports the following dependencies.

ods-icon
ods-icon-button

Dialog

Examples

Basic

Custom Width

Scrolling

Header Actions

Preventing the Dialog from Closing

Customizing Initial Focus

Importing

Slots

Properties

Events

Methods

Parts

Dependencies