Skip to content
MENU

Soracom

Design System

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.

The corner radius is 10px . When inside a modal which includes a content positioning class (i.e. ds-modal–top) - the border-radius will only be applied to the appropriate corners.

Construction 

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

  1. Header – including icon, title, description and text elements. All elements within the header are optional, and the entire header area can be omitted.

  2. Main – 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">
  <!-- Dialog -->
  <div class="ds-dialog">
    <!-- Dialog header -->
    <div class="ds-dialog__header ">
      <i class="ds-dialog__header-icon ds-icon--icon-deactivate-sim"></i>
      <div class="ds-dialog__title">Title</div>
      <div class="ds-dialog__description">Description</div>
      <div class="ds-dialog__text">Text</div>
    </div>
    <!-- Dialog main -->
    <div class="ds-dialog__main">
      <div>Content</div>
    </div>
    <!-- Dialog footer -->
    <div class="ds-dialog__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>
    </div>
  </div>
</div>

Visual states 

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

Alert state
<div class="ds-modal--alert">
  <!-- Dialog -->
  <div class="ds-dialog">
    ... content ...
  </div>
</div>
Warning state
<div class="ds-modal--warning">
  <!-- Dialog -->
  <div class="ds-dialog">
    ... content ...
  </div>
</div>
Success state
<div class="ds-modal--success">
  <!-- Dialog -->
  <div class="ds-dialog">
    ... content ...
  </div>
</div>
Info state
<div class="ds-modal--info">
  <!-- Dialog -->
  <div class="ds-dialog">
    ... content ...
  </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.

Loading state using --loading icon
<div class="ds-dialog--loading">
  <!-- Dialog -->
  <div class="ds-dialog">
    ... content ...
  </div>
</div>
Loading state using --loading-refresh icon
<div class="ds-dialog--loading">
  <!-- Dialog -->
  <div class="ds-dialog">
    ... content ...
  </div>
</div>

Size 

Narrow 

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

<div class="ds-modal--narrow">
  <!-- Dialog -->
  <div class="ds-dialog">
    ... content ...
  </div>
</div>

Mid 

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

<div class="ds-modal--mid">
  <!-- Dialog -->
  <div class="ds-dialog">
    ... content ...
  </div>
</div>

Simple 

Simple style
<div class="ds-modal--simple">
  <!-- Dialog -->
  <div class="ds-dialog">
    ... content ...
  </div>
</div>

Plain 

Plain style
<div class="ds-modal--plain">
  <!-- Dialog -->
  <div class="ds-dialog">
    ... content ...
  </div>
</div>

Examples 

Use the menu to control the dialog

Open in new window