Skip to content
MENU

Soracom

Design System

Modal

Overview 

ds-modal implements a full browser window, static, fixed position, tinted panel that overlays any background content and currently works in conjuction with ds-dialog.

Dark-Mode support 

As of v1.5.43+ ds-modal supports dark-mode and switches the background tinted color accordingly.

Options 

Basic usage 

<div class="ds-modal">
  <div>Content</div>
</div>

Content position 

Any content within the modal container is centered vertically and horizontally by default, but specific positioning options can be achieved using the specific classes shown below.

Top alignment
<div class="ds-modal--top">
  <div>Content</div>
</div>
Bottom alignment
<div class="ds-modal--bottom">
  <div>Content</div>
</div>
Left alignment
<div class="ds-modal--left">
  <div>Content</div>
</div>
Right alignment
<div class="ds-modal--right">
  <div>Content</div>
</div>

Loading state 

Available from v1.7.9+

When a modal has the the class ds-modal--loading any (optional) content inside the modal is not visible and the loading state animation is shown.

Loading state using --loading icon
<div class="ds-modal--loading">
  <div>Content</div>
</div>
Loading state using --loading-refresh icon
<div class="ds-modal--loading-refresh">
  <div>Content</div>
</div>