Dialog

Overview

Dialogs are usually contained within a ds-modal. If you use the html <dialog> element, no parent ds-modal element is needed.

The default maximum width is 800px and minimum width is 345px. Any dialog that exceeds the window height can be scrolled up in it’s entirety.

Construction

Dialogs consist of 3 distinct areas - Banner, Content and Footer.

Banner – including icon, title, description and text elements. All elements within the banner are optional, and the entire banner area can be omitted. See ds-banner for more details.
Section – the main content area of the dialog
Footer – including primary and secondary buttons, and text (optional). Buttons in dialogs are right aligned by default. The primary button must always be first in the source order (but will be display visually last). All elements within the footer are optional, and the entire footer area can be omitted.

Avoid using dialogs with long or complex forms.

The dialog footer should have no more than two buttons - the primary button (‘Update’, ‘Save’, ‘Delete’ etc.) and a secondary button (‘Cancel’ etc.).

Options

Basic usage

div element

Using html div element.

html

Copy

<div class="ds-modal">
  <div class="ds-dialog">
    <header class="ds-banner">
      <i class="ds-icon --icon-language"></i>
      <div>
        <h2>空色 Sky blue</h2>
        <p>
          This event handler UI is full featured, advanced UI for handling
          events and actions. In this screen you can view all of the events and
          event details.
        </p>
      </div>
    </header>
    <section>...Content...</section>
    <footer>
      <button class="ds-button --primary">
        <span>Primary button</span>
      </button>
      <button class="ds-button">
        <span>Secondary button</span>
      </button>
      <div class="ds-text">Text</div>
    </footer>
  </div>
</div>

dialog element

Using the native html dialog element.

html

Copy

<dialog class="ds-dialog" aria-modal="true" open>
  <header class="ds-banner">
    <i class="ds-icon --icon-language"></i>
    <div>
      <h2>空色 Sky blue</h2>
      <p>
        This event handler UI is full featured, advanced UI for handling events
        and actions. In this screen you can view all of the events and event
        details.
      </p>
    </div>
  </header>
  <section>...Content...</section>
  <footer>
    <button class="ds-button --primary">
      <span>Primary button</span>
    </button>
    <button class="ds-button">
      <span>Secondary button</span>
    </button>
    <div class="ds-text">Text</div>
  </footer>
</dialog>

Javascript controlled dialog element

html

Copy

<!-- Click links to toggle dialog -->
<div class="ds-cols">
  <a
    href="#"
    onClick="document.getElementById('example-dialog').showModal(); return false;"
    ><code>showModal()</code></a
  >
</div>
<dialog id="example-dialog" class="ds-dialog" aria-modal="true">
  <header class="ds-banner">
    <i class="ds-icon --icon-language"></i>
    <div>
      <h2>空色 Sky blue</h2>
      <p>
        This event handler UI is full featured, advanced UI for handling events
        and actions. In this screen you can view all of the events and event
        details.
      </p>
    </div>
  </header>
  <section>...Content...</section>
  <footer>
    <button class="ds-button --primary">
      <span>Primary button</span>
    </button>
    <button
      class="ds-button"
      onClick="document.getElementById('example-dialog').close(); return false"
    >
      <span>Close</span>
    </button>
  </footer>
</dialog>

Visual states

Dialogs adhere to 4x preset visual states - alert, warning, success and info.

html

Copy

<div class="ds-modal">
  <div class="ds-dialog --alert">
    <header class="ds-banner">
      <i class="ds-icon --icon-language"></i>
      <div>
        <h2>空色 Sky blue</h2>
        <p>
          This event handler UI is full featured, advanced UI for handling
          events and actions. In this screen you can view all of the events and
          event details.
        </p>
      </div>
    </header>
    <section>...Content...</section>
    <footer>
      <button class="ds-button --primary">
        <span>Primary button</span>
      </button>
      <button class="ds-button">
        <span>Secondary button</span>
      </button>
      <div class="ds-text">Text</div>
    </footer>
  </div>
</div>

Loading state

A dialog can be triggered to display a loading state - where the dialog contents are hidden, and the replaced by a centered spinning loading icon – without affecting the dimensions of the dialog.

Additional options are available using Message state

Default

html

Copy

<div class="ds-modal">
  <div class="ds-dialog --loading">
    <header class="ds-banner">
      <i class="ds-icon --icon-language"></i>
      <div>
        <h2>空色 Sky blue</h2>
        <p>
          This event handler UI is full featured, advanced UI for handling
          events and actions. In this screen you can view all of the events and
          event details.
        </p>
      </div>
    </header>
    <section>...Content...</section>
    <footer>
      <button class="ds-button --primary">
        <span>Primary button</span>
      </button>
      <button class="ds-button">
        <span>Secondary button</span>
      </button>
      <div class="ds-text">Text</div>
    </footer>
  </div>
</div>

Alternative loading-refresh icon

html

Copy

<div class="ds-modal">
  <div class="ds-dialog --loading-refresh">
    <header class="ds-banner">
      <i class="ds-icon --icon-language"></i>
      <div>
        <h2>空色 Sky blue</h2>
        <p>
          This event handler UI is full featured, advanced UI for handling
          events and actions. In this screen you can view all of the events and
          event details.
        </p>
      </div>
    </header>
    <section>...Content...</section>
    <footer>
      <button class="ds-button --primary">
        <span>Primary button</span>
      </button>
      <button class="ds-button">
        <span>Secondary button</span>
      </button>
      <div class="ds-text">Text</div>
    </footer>
  </div>
</div>

Custom icon by adding any icon class

html

Copy

<div class="ds-modal">
  <div class="ds-dialog --loading --icon-radar">
    <header class="ds-banner">
      <i class="ds-icon --icon-language"></i>
      <div>
        <h2>空色 Sky blue</h2>
        <p>
          This event handler UI is full featured, advanced UI for handling
          events and actions. In this screen you can view all of the events and
          event details.
        </p>
      </div>
    </header>
    <section>...Content...</section>
    <footer>
      <button class="ds-button --primary">
        <span>Primary button</span>
      </button>
      <button class="ds-button">
        <span>Secondary button</span>
      </button>
      <div class="ds-text">Text</div>
    </footer>
  </div>
</div>

Message state

Message state extends and can be used with Loading state. If a dialog has a data-attribute data-ds-message the dialog contents are hidden, and replaced by an icon and the text of the data-ds-message.

html

Copy

<div class="ds-modal">
  <div class="ds-dialog" data-ds-message="Message text">
    <header class="ds-banner">
      <i class="ds-icon --icon-language"></i>
      <div>
        <h2>空色 Sky blue</h2>
        <p>
          This event handler UI is full featured, advanced UI for handling
          events and actions. In this screen you can view all of the events and
          event details.
        </p>
      </div>
    </header>
    <section>...Content...</section>
    <footer>
      <button class="ds-button --primary">
        <span>Primary button</span>
      </button>
      <button class="ds-button">
        <span>Secondary button</span>
      </button>
      <div class="ds-text">Text</div>
    </footer>
  </div>
</div>

Loading state with a message

html

Copy

<div class="ds-modal">
  <div class="ds-dialog --loading" data-ds-message="Message text">
    <header class="ds-banner">
      <i class="ds-icon --icon-language"></i>
      <div>
        <h2>空色 Sky blue</h2>
        <p>
          This event handler UI is full featured, advanced UI for handling
          events and actions. In this screen you can view all of the events and
          event details.
        </p>
      </div>
    </header>
    <section>...Content...</section>
    <footer>
      <button class="ds-button --primary">
        <span>Primary button</span>
      </button>
      <button class="ds-button">
        <span>Secondary button</span>
      </button>
      <div class="ds-text">Text</div>
    </footer>
  </div>
</div>

You can set a custom icon

html

Copy

<div class="ds-modal">
  <div class="ds-dialog --icon-rocket" data-ds-message="Message text">
    <header class="ds-banner">
      <i class="ds-icon --icon-language"></i>
      <div>
        <h2>空色 Sky blue</h2>
        <p>
          This event handler UI is full featured, advanced UI for handling
          events and actions. In this screen you can view all of the events and
          event details.
        </p>
      </div>
    </header>
    <section>...Content...</section>
    <footer>
      <button class="ds-button --primary">
        <span>Primary button</span>
      </button>
      <button class="ds-button">
        <span>Secondary button</span>
      </button>
      <div class="ds-text">Text</div>
    </footer>
  </div>
</div>

You can set a custom icon, with the loading state animation

html

Copy

<div class="ds-modal">
  <div
    class="ds-dialog --loading --icon-compass"
    data-ds-message="Message text"
  >
    <header class="ds-banner">
      <i class="ds-icon --icon-language"></i>
      <div>
        <h2>空色 Sky blue</h2>
        <p>
          This event handler UI is full featured, advanced UI for handling
          events and actions. In this screen you can view all of the events and
          event details.
        </p>
      </div>
    </header>
    <section>...Content...</section>
    <footer>
      <button class="ds-button --primary">
        <span>Primary button</span>
      </button>
      <button class="ds-button">
        <span>Secondary button</span>
      </button>
      <div class="ds-text">Text</div>
    </footer>
  </div>
</div>

Size

Narrow

.ds-dialog --narrow (maximum width 550px)

html

Copy

<div class="ds-modal">
  <div class="ds-dialog --narrow">
    <header class="ds-banner">
      <i class="ds-icon --icon-language"></i>
      <div>
        <h2>空色 Sky blue</h2>
        <p>
          This event handler UI is full featured, advanced UI for handling
          events and actions. In this screen you can view all of the events and
          event details.
        </p>
      </div>
    </header>
    <section>...Content...</section>
    <footer>
      <button class="ds-button --primary">
        <span>Primary button</span>
      </button>
      <button class="ds-button">
        <span>Secondary button</span>
      </button>
      <div class="ds-text">Text</div>
    </footer>
  </div>
</div>

Mid

.ds-dialog --mid (maximum width 675px)

html

Copy

<div class="ds-modal">
  <div class="ds-dialog --mid">
    <header class="ds-banner">
      <i class="ds-icon --icon-language"></i>
      <div>
        <h2>空色 Sky blue</h2>
        <p>
          This event handler UI is full featured, advanced UI for handling
          events and actions. In this screen you can view all of the events and
          event details.
        </p>
      </div>
    </header>
    <section>...Content...</section>
    <footer>
      <button class="ds-button --primary">
        <span>Primary button</span>
      </button>
      <button class="ds-button">
        <span>Secondary button</span>
      </button>
      <div class="ds-text">Text</div>
    </footer>
  </div>
</div>

Medium

.ds-dialog --medium (maximum width 900px)

html

Copy

<div class="ds-modal">
  <div class="ds-dialog --medium">
    <header class="ds-banner">
      <i class="ds-icon --icon-language"></i>
      <div>
        <h2>空色 Sky blue</h2>
        <p>
          This event handler UI is full featured, advanced UI for handling
          events and actions. In this screen you can view all of the events and
          event details.
        </p>
      </div>
    </header>
    <section>...Content...</section>
    <footer>
      <button class="ds-button --primary">
        <span>Primary button</span>
      </button>
      <button class="ds-button">
        <span>Secondary button</span>
      </button>
      <div class="ds-text">Text</div>
    </footer>
  </div>
</div>

Wide

.ds-dialog --medium (maximum width 1100px)

html

Copy

<div class="ds-modal">
  <div class="ds-dialog --wide">
    <header class="ds-banner">
      <i class="ds-icon --icon-language"></i>
      <div>
        <h2>空色 Sky blue</h2>
        <p>
          This event handler UI is full featured, advanced UI for handling
          events and actions. In this screen you can view all of the events and
          event details.
        </p>
      </div>
    </header>
    <section>...Content...</section>
    <footer>
      <button class="ds-button --primary">
        <span>Primary button</span>
      </button>
      <button class="ds-button">
        <span>Secondary button</span>
      </button>
      <div class="ds-text">Text</div>
    </footer>
  </div>
</div>

Position

Position of the dialog can be controlled on the parent ds-modal container.

right positioned div element in ds-modal

html

Copy

<div class="ds-modal --right">
  <div class="ds-dialog" aria-modal="true" open>
    <header class="ds-banner">
      <i class="ds-icon --icon-language"></i>
      <div>
        <h2>空色 Sky blue</h2>
        <p>
          This event handler UI is full featured, advanced UI for handling
          events and actions. In this screen you can view all of the events and
          event details.
        </p>
      </div>
    </header>
    <section>...Content...</section>
    <footer>
      <button class="ds-button --primary">
        <span>Primary button</span>
      </button>
      <button class="ds-button">
        <span>Secondary button</span>
      </button>
      <div class="ds-text">Text</div>
    </footer>
  </div>
</div>

right positioned javascript controlled dialog element in ds-modal

html

Copy

<!-- Click links to toggle dialog -->
<div class="ds-cols">
  <a
    href="#"
    onClick="document.getElementById('example-dialog-2').showModal(); return false;"
    ><code>showModal()</code></a
  >
</div>
<div class="ds-modal --right">
  <dialog id="example-dialog-2" class="ds-dialog" aria-modal="true">
    <header class="ds-banner">
      <i class="ds-icon --icon-language"></i>
      <div>
        <h2>空色 Sky blue</h2>
        <p>
          This event handler UI is full featured, advanced UI for handling
          events and actions. In this screen you can view all of the events and
          event details.
        </p>
      </div>
    </header>
    <section>...Content...</section>
    <footer>
      <button class="ds-button --primary">
        <span>Primary button</span>
      </button>
      <button
        class="ds-button"
        onClick="document.getElementById('example-dialog-2').close(); return false"
      >
        <span>Close</span>
      </button>
    </footer>
  </dialog>
</div>

Styles

Simple

html

Copy

<div class="ds-modal">
  <div class="ds-dialog --simple">
    <header class="ds-banner">
      <i class="ds-icon --icon-language"></i>
      <div>
        <h2>空色 Sky blue</h2>
        <p>
          This event handler UI is full featured, advanced UI for handling
          events and actions. In this screen you can view all of the events and
          event details.
        </p>
      </div>
    </header>
    <section>...Content...</section>
    <footer>
      <button class="ds-button --primary">
        <span>Primary button</span>
      </button>
      <button class="ds-button">
        <span>Secondary button</span>
      </button>
      <div class="ds-text">Text</div>
    </footer>
  </div>
</div>

Plain

html

Copy

<div class="ds-modal">
  <div class="ds-dialog --plain">
    <header class="ds-banner">
      <i class="ds-icon --icon-language"></i>
      <div>
        <h2>空色 Sky blue</h2>
        <p>
          This event handler UI is full featured, advanced UI for handling
          events and actions. In this screen you can view all of the events and
          event details.
        </p>
      </div>
    </header>
    <section>...Content...</section>
    <footer>
      <button class="ds-button --primary">
        <span>Primary button</span>
      </button>
      <button class="ds-button">
        <span>Secondary button</span>
      </button>
      <div class="ds-text">Text</div>
    </footer>
  </div>
</div>

Right panel

A dialog inside a ds-modal.--right or a dialog with the class ds-dialog.--right will display pinned to the right edge of the browser.

By default, if the content in the dialog is too long to fit on the screen, the entire dialog will be scrollable and the user will need to scroll down to see the footer.

Right aligned dialog with minimal content

html

Copy

<div class="ds-modal --right">
  <div class="ds-dialog">
    <header class="ds-banner">
      <i class="ds-icon --icon-language"></i>
      <div>
        <h2>空色 Sky blue</h2>
        <p>
          This event handler UI is full featured, advanced UI for handling
          events and actions. In this screen you can view all of the events and
          event details.
        </p>
      </div>
    </header>
    <section>...Content...</section>
    <footer>
      <button class="ds-button --primary">
        <span>Primary button</span>
      </button>
      <button class="ds-button">
        <span>Secondary button</span>
      </button>
      <div class="ds-text">Text</div>
    </footer>
  </div>
</div>

Right aligned dialog with longer content

html

Copy

<div class="ds-modal --right">
  <div class="ds-dialog">
    <header class="ds-banner">
      <i class="ds-icon --icon-language"></i>
      <div>
        <h2>空色 Sky blue</h2>
        <p>
          This event handler UI is full featured, advanced UI for handling
          events and actions. In this screen you can view all of the events and
          event details.
        </p>
      </div>
    </header>
    <section>
      ...Content... ...Content... ...Content... ...Content... ...Content...
      ...Content...
    </section>
    <footer>
      <button class="ds-button --primary">
        <span>Primary button</span>
      </button>
      <button class="ds-button">
        <span>Secondary button</span>
      </button>
      <div class="ds-text">Text</div>
    </footer>
  </div>
</div>

Sticky footer/header

For a centered dialog, if either the header or footer has --sticky both header and footer will automatically be treated as sticky.

html

Copy

<div class="ds-modal">
  <div class="ds-dialog">
    <header class="ds-banner">
      <i class="ds-icon --icon-language"></i>
      <div>
        <h2>空色 Sky blue</h2>
        <p>
          This event handler UI is full featured, advanced UI for handling
          events and actions. In this screen you can view all of the events and
          event details.
        </p>
      </div>
    </header>
    <section>
      ...Content... ...Content... ...Content... ...Content... ...Content...
      ...Content...
    </section>
    <footer class="--sticky">
      <button class="ds-button --primary">
        <span>Primary button</span>
      </button>
      <button class="ds-button">
        <span>Secondary button</span>
      </button>
      <div class="ds-text">Text</div>
    </footer>
  </div>
</div>

For a --right aligned dialog if the footer has the class --sticky the footer will always display on screen, pinned to the bottom of the browser window, and if the header has the class --sticky it will always display on screen pinned to the top of the browser window.

Sticky footer

html

Copy

<div class="ds-modal --right">
  <div class="ds-dialog">
    <header class="ds-banner">
      <i class="ds-icon --icon-language"></i>
      <div>
        <h2>空色 Sky blue</h2>
        <p>
          This event handler UI is full featured, advanced UI for handling
          events and actions. In this screen you can view all of the events and
          event details.
        </p>
      </div>
    </header>
    <section>
      ...Content... ...Content... ...Content... ...Content... ...Content...
      ...Content...
    </section>
    <footer class="--sticky">
      <button class="ds-button --primary">
        <span>Primary button</span>
      </button>
      <button class="ds-button">
        <span>Secondary button</span>
      </button>
      <div class="ds-text">Text</div>
    </footer>
  </div>
</div>

Sticky header

html

Copy

<div class="ds-modal --right">
  <div class="ds-dialog">
    <header class="ds-banner --sticky">
      <i class="ds-icon --icon-language"></i>
      <div>
        <h2>空色 Sky blue</h2>
        <p>
          This event handler UI is full featured, advanced UI for handling
          events and actions. In this screen you can view all of the events and
          event details.
        </p>
      </div>
    </header>
    <section>
      ...Content... ...Content... ...Content... ...Content... ...Content...
      ...Content...
    </section>
    <footer>
      <button class="ds-button --primary">
        <span>Primary button</span>
      </button>
      <button class="ds-button">
        <span>Secondary button</span>
      </button>
      <div class="ds-text">Text</div>
    </footer>
  </div>
</div>

Sticky header and footer

html

Copy

<div class="ds-modal --right">
  <div class="ds-dialog">
    <header class="ds-banner --sticky">
      <i class="ds-icon --icon-language"></i>
      <div>
        <h2>空色 Sky blue</h2>
        <p>
          This event handler UI is full featured, advanced UI for handling
          events and actions. In this screen you can view all of the events and
          event details.
        </p>
      </div>
    </header>
    <section>
      ...Content... ...Content... ...Content... ...Content... ...Content...
      ...Content...
    </section>
    <footer class="--sticky">
      <button class="ds-button --primary">
        <span>Primary button</span>
      </button>
      <button class="ds-button">
        <span>Secondary button</span>
      </button>
      <div class="ds-text">Text</div>
    </footer>
  </div>
</div>

Examples

html

Copy

<ng-component>
  <div class="ds-modal revoke-authkey">
    <div class="ds-dialog">
      <div class="ds-banner">
        <div>
          <h3>Revoke the AuthKey</h3>
        </div>
      </div>
      <ng-component>
        <section ui-ds-modal-content="">
          <div class="ds-notice --alert">
            This operation cannot be undone. Are you sure you want to to revoke
            the AuthKey?
          </div>
          <dl class="ds-details">
            <dt>AuthKey ID</dt>
            <dd>
              <div class="ds-text --inset --large --code">
                keyId-AYkZbvUpHUUWSxLEEYuTYDNIMUcYIauS
              </div>
            </dd>
          </dl>
        </section>
        <footer ui-ds-modal-footer="">
          <ui-button-bar>
            <div class="x-ui-button-bar">
              <div class="x-ui-button-bar-left"></div>
              <div class="x-ui-button-bar-right">
                <ui-button>
                  <button
                    ng-reflect-ng-class="x-ui-button x-cancel"
                    type="button"
                    data-button-style="default"
                  >
                    <span>Cancel</span>
                  </button>
                </ui-button>
                <ui-button>
                  <button type="button" data-button-style="danger">
                    <span>Revoke</span>
                  </button>
                </ui-button>
              </div>
            </div>
          </ui-button-bar>
        </footer>
      </ng-component>
    </div>
  </div>
</ng-component>