Skip to content

Soracom

Design System
Home Design System Containers Dialog

Dialog

Overview 

Dialogs are to be contained within a ds-modal.

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.

  1. 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.

  2. Section – the main content area of the dialog

  3. 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 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>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<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>
<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>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<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>

Visual states 

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

<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>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<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 

Available from v1.7.9+ When a dialog has the the class ds-dialog--loading any content inside the dialog is not visible and the loading state animation is shown.

<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>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<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>
<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>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<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>

Size 

Narrow 

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

<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>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<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)

<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>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<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>

Simple 

<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>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<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 

<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>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<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>

Examples 

ui-ds-modal 

<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>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<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>