Chi Documentation

Modals

Modals are windows used for displaying prompts and subtasks without losing context of the parent application.

Examples

Modals are composed of several parts. To render a modal, include a modal backdrop, modal header, modal body, and modal footer (optional).

Base

Modal Title

Modal content

<div class="a-modal__backdrop">
  <div class="a-modal">
    <div class="a-modal__header">
      <h3 class="a-modal__title">Modal Title</h3>
      <button class="a-modal__close"></button>
    </div>
    <div class="a-modal__content">
      <p class="-text -m0">Modal content</p>
    </div>
    <div class="a-modal__footer">
      <button class="a-btn">Cancel</button>
      <button class="a-btn -primary -ml2">Save</button>
    </div>
  </div>
</div>

Inverse Backdrop

Invert a modals backdrop by applying the class -inverse.

Modal Title

Modal content

<div class="a-modal__backdrop -inverse">
  <div class="a-modal">
    <div class="a-modal__header">
      <h3 class="a-modal__title">Modal Title</h3>
      <button class="a-modal__close"></button>
    </div>
    <div class="a-modal__content">
      <p class="-text -m0">Modal content</p>
    </div>
    <div class="a-modal__footer">
      <button class="a-btn">Cancel</button>
      <button class="a-btn -primary -ml2">Save</button>
    </div>
  </div>
</div>

Borderless

Disable header or footer borders by applying the class -noBorder to a-modal__header or a-modal__footer.

Modal Title

Modal content

<div class="a-modal__backdrop">
  <div class="a-modal">
    <div class="a-modal__header -noBorder">
      <h3 class="a-modal__title">Modal Title</h3>
      <button class="a-modal__close"></button>
    </div>
    <div class="a-modal__content">
      <p class="-text -m0">Modal content</p>
    </div>
    <div class="a-modal__footer -noBorder">
      <button class="a-btn">Cancel</button>
      <button class="a-btn -primary -ml2">Save</button>
    </div>
  </div>
</div>

Multi-step

For multi-step modals, ensure the class -centered is applied to a-modal__title. This will provide sufficient real estate on the left side to store a back button a-modal__back.

Modal Title

Modal content

<div class="a-modal__backdrop">
  <div class="a-modal">
    <div class="a-modal__header">
      <h3 class="a-modal__title -centered">Modal Title</h3>
      <button class="a-modal__back"></button>
      <button class="a-modal__close"></button>
    </div>
    <div class="a-modal__content">
      <p class="-text -m0">Modal content</p>
    </div>
    <div class="a-modal__footer">
      <button class="a-btn -primary -ml2">Next</button>
    </div>
  </div>
</div>