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


      <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">

            <div class="modal-content-spacer"><p>Modal label text.</p></div>

          </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


      <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">

            <div class="modal-content-spacer"><p>Modal label text.</p></div>

          </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">

            <div class="modal-content-spacer"><p>Modal label text.</p></div>

          </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


      <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">

            <div class="modal-content-spacer">

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

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