Modal

Modals are containers that appear with a scrim (semi-transparent overlay) on top of the window or content the user is currently interacting with. Modals draw attention to actions that must be taken before they can be dismissed.

Class Type
modals Modal A class representing a modal

Components

Modals consist of five components:

Class Type
modal-form Form
modal-header Header
modal-title Title
modal-content Content
modal-footer Footer

Modal title

Modal label text.
<button class="button"><span>Open Modal</span></button>
<dialog class="modal" id="dialog">
  <form class="modal-form" method="dialog">
    <header class="modal-header">
      <div class="u-flex u-main-space-between u-cross-center u-gap-16">
        <div class="avatar is-color-orange is-medium">
          <span class="icon-exclamation" aria-hidden="true"></span>
        </div>
        <h4 class="modal-title heading-level-5">Modal title</h4>
        <button class="button is-text is-small is-only-icon" aria-label="Close modal">
          <span class="icon-x" aria-hidden="true"></span>
        </button>
      </div>
    </header>
    <div class="modal-content u-small">Modal label text.</div>
    <div class="modal-footer">
      <div class="u-flex u-main-end u-gap-16">
        <button class="button is-text"><span class="text">Button</span></button>
        <button class="button is-secondary"><span class="text">Button</span></button>
      </div>
    </div>
  </form>
</dialog>

To open or close a modal, use the native <dialog> element’s show(), showModal() and close() methods. For more information, please refer to the MDN documentation.

Sizes

In the Appwrite console, we use three sizes of modals:

class Type
is-small Small
- Medium
is-big Big

Modal title

Modal label text.

Modal title

Modal label text.
<dialog id="dialog4" class="modal is-small" open>
  <form class="modal-form" method="dialog">
    <header class="modal-header">
      <div class="u-flex u-main-space-between u-cross-center u-gap-16">
        <h4 class="modal-title heading-level-5">Modal title</h4>
        <button
          class="button is-text is-small is-only-icon u-cross-center u-margin-inline-start-auto"
          aria-label="Close modal"
        >
          <span class="icon-x" aria-hidden="true"></span>
        </button>
      </div>
    </header>
    <div class="modal-content u-small">Modal label text.</div>
    <div class="modal-footer">
      <div class="u-flex u-main-end u-gap-16">
        <button class="button is-text"><span class="text">Button</span></button>
        <button class="button is-secondary"><span class="text">Button</span></button>
      </div>
    </div>
  </form>
</dialog>
<dialog id="dialog5" class="modal is-big" open>
  <form class="modal-form" method="dialog">
    <header class="modal-header">
      <div class="u-flex u-main-space-between u-cross-center u-gap-16">
        <h4 class="modal-title heading-level-5">Modal title</h4>
        <button
          class="button is-text is-small is-only-icon u-cross-center u-margin-inline-start-auto"
          aria-label="Close modal"
        >
          <span class="icon-x" aria-hidden="true"></span>
        </button>
      </div>
    </header>
    <div class="modal-content u-small">Modal label text.</div>
    <div class="modal-footer">
      <div class="u-flex u-main-end u-gap-16">
        <button class="button is-text"><span class="text">Button</span></button>
        <button class="button is-secondary"><span class="text">Button</span></button>
      </div>
    </div>
  </form>
</dialog>

Separate Header

State class which allow to seperate the header with border.

class Type
is-separate-header Add Border bottom to header of Modal

Modal title

Provide contextual feedback messages for complex modals.

<dialog id="dialog6" class="modal is-big is-separate-header" open>
  <form class="modal-form" method="dialog">
    <header class="modal-header">
      <div class="u-flex u-main-space-between u-cross-center u-gap-16">
        <h4 class="modal-title heading-level-5">Modal title</h4>
        <button
          class="button is-text is-small is-only-icon u-cross-center u-margin-inline-start-auto"
          aria-label="Close modal"
        >
          <span class="icon-x" aria-hidden="true"></span>
        </button>
      </div>
      <p>Provide contextual feedback messages for complex modals.</p>
    </header>
    <div class="modal-content">
      <ul class="form-list">
        <li class="form-item">
          <label class="label">Label</label>
          <div class="input-text-wrapper" style="--amount-of-buttons: 1;">
            <input type="password" class="input-text" placeholder="Placeholder" />
            <button class="show-password-button" aria-label="show password" type="button">
              <span class="icon-eye" aria-hidden="true"></span>
            </button>
          </div>
        </li>
        <li class="form-item">
          <label class="label">Label</label>
          <div class="input-text-wrapper" style="--amount-of-buttons:2">
            <input type="text" placeholder="Placeholder" />
            <div class="options-list">
              <button
                class="options-list-button"
                aria-label="show password / hide password"
                type="button"
              >
                <span class="icon-eye" aria-hidden="true"></span>
              </button>
              <button class="options-list-button" aria-label="copy text" type="button">
                <span class="icon-duplicate" aria-hidden="true"></span>
              </button>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div class="modal-footer">
      <div class="u-flex u-main-end u-gap-16">
        <button class="button is-text"><span class="text">Button</span></button>
        <button class="button is-secondary"><span class="text">Button</span></button>
      </div>
    </div>
  </form>
</dialog>

Best Practice

Modals are used mostly for the creation or deletion of an object. Modals can include avatars, buttons, illustrations, tags and text.


modal
modal