Alert

Alerts display both task-generated and system-generated messages. They can persist in the UI, or they can be dismissed by the user.

Types

In the Appwrite console, we use two types of alerts:

Class Type
alert Inline Inline alerts present additional information to the user related to content within a form or a body of text.
alert is-standalone Standalone Alert Standalone is based Alert type Inline
alert is-action Action Alert action is based Alert type Inline
alert-sticky Sticky Sticky alerts are used to notify the user about a change in the system status, or about a recently performed action.

States

In the Appwrite console, we use five states of alerts:

Class Type
- Default Use this alert to provide general information to the user.
This is a default alert

Some description about the alert sent to the user.

<section class="alert">
  <div class="alert-grid">
    <button
      class="button is-text is-only-icon"
      style="--button-size:1.5rem;"
      aria-label="close alert box"
    >
      <span class="icon-x" aria-hidden="true"></span>
    </button>
    <span class="icon-info" aria-hidden="true"></span>
    <div class="alert-content">
      <h6 class="alert-title">This is a default alert</h6>
      <p class="alert-message">Some description about the alert sent to the user.</p>
      <div class="alert-buttons u-flex">
        <button class="button is-text"><span class="text">Action 1</span></button>
        <button class="button is-text"><span class="text">Action 2</span></button>
      </div>
    </div>
  </div>
</section>
This is a standalone alert

Some description about the alert sent to the user.

<section class="alert is-standalone">
  <div class="alert-grid">
    <button
      class="button is-text is-only-icon"
      style="--button-size:1.5rem;"
      aria-label="close alert box"
    >
      <span class="icon-x" aria-hidden="true"></span>
    </button>
    <span class="icon-info" aria-hidden="true"></span>
    <div class="alert-content">
      <h6 class="alert-title">This is a standalone alert</h6>
      <p class="alert-message">Some description about the alert sent to the user.</p>
      <div class="alert-buttons u-flex">
        <button class="button is-text"><span class="text">Action 1</span></button>
        <button class="button is-text"><span class="text">Action 2</span></button>
      </div>
    </div>
  </div>
</section>
This is a default alert

Some description about the alert sent to the user.

<section class="alert is-action">
  <div class="alert-grid">
    <span class="icon-info" aria-hidden="true"></span>
    <div class="alert-content">
      <h6 class="alert-title">This is a default alert</h6>
      <p class="alert-message">Some description about the alert sent to the user.</p>
    </div>
    <div class="alert-buttons u-flex u-gap-16 u-cross-child-center">
      <button class="button is-text is-full-width-mobile">
        <span class="text">Secondary call to action</span>
      </button>
      <button class="button is-secondary is-full-width-mobile">
        <span class="text">Call to action</span>
      </button>
    </div>
  </div>
</section>

Alert Sticky Title

Provide contextual feedback messages for typical user actions.

<section class="alert-sticky">
  <button
    class="button is-text is-only-icon"
    style="--button-size:1.5rem;"
    aria-label="close alert"
  >
    <span class="icon-x" aria-hidden="true"></span>
  </button>
  <div class="alert-sticky-image"><span class="icon-info" aria-hidden="true"></span></div>
  <div class="alert-sticky-content">
    <h4 class="alert-sticky-title">Alert Sticky Title</h4>
    <p>Provide contextual feedback messages for typical user actions.</p>
  </div>
  <div class="alert-sticky-buttons u-flex">
    <button class="button is-text is-small"><span class="text">Action 1</span></button>
    <button class="button is-text is-small"><span class="text">Action 2</span></button>
  </div>
</section>
Class Type
is-info Info Use this alert to provide additional information or tips to the user.
This is a default alert

Some description about the alert sent to the user.

<section class="alert is-info">
  <div class="alert-grid">
    <button
      class="button is-text is-only-icon"
      style="--button-size:1.5rem;"
      aria-label="close alert box"
    >
      <span class="icon-x" aria-hidden="true"></span>
    </button>
    <span class="icon-info" aria-hidden="true"></span>
    <div class="alert-content">
      <h6 class="alert-title">This is a default alert</h6>
      <p class="alert-message">Some description about the alert sent to the user.</p>
      <div class="alert-buttons u-flex">
        <button class="button is-text"><span class="text">Action 1</span></button>
        <button class="button is-text"><span class="text">Action 2</span></button>
      </div>
    </div>
  </div>
</section>
This is a standalone alert

Some description about the alert sent to the user.

<section class="alert is-standalone is-info">
  <div class="alert-grid">
    <button
      class="button is-text is-only-icon"
      style="--button-size:1.5rem;"
      aria-label="close alert box"
    >
      <span class="icon-x" aria-hidden="true"></span>
    </button>
    <span class="icon-info" aria-hidden="true"></span>
    <div class="alert-content">
      <h6 class="alert-title">This is a standalone alert</h6>
      <p class="alert-message">Some description about the alert sent to the user.</p>
      <div class="alert-buttons u-flex">
        <button class="button is-text"><span class="text">Action 1</span></button>
        <button class="button is-text"><span class="text">Action 2</span></button>
      </div>
    </div>
  </div>
</section>
This is a default alert

Some description about the alert sent to the user.

<section class="alert is-action is-info">
  <div class="alert-grid">
    <span class="icon-info" aria-hidden="true"></span>
    <div class="alert-content">
      <h6 class="alert-title">This is a default alert</h6>
      <p class="alert-message">Some description about the alert sent to the user.</p>
    </div>
    <div class="alert-buttons u-flex u-gap-16 u-cross-child-center">
      <button class="button is-text is-full-width-mobile">
        <span class="text">Secondary call to action</span>
      </button>
      <button class="button is-secondary is-full-width-mobile">
        <span class="text">Call to action</span>
      </button>
    </div>
  </div>
</section>

Alert Sticky Title

Provide contextual feedback messages for typical user actions.

<section class="alert-sticky is-info">
  <button
    class="button is-text is-only-icon"
    style="--button-size:1.5rem;"
    aria-label="close alert"
  >
    <span class="icon-x" aria-hidden="true"></span>
  </button>
  <div class="alert-sticky-image"><span class="icon-info" aria-hidden="true"></span></div>
  <div class="alert-sticky-content">
    <h4 class="alert-sticky-title">Alert Sticky Title</h4>
    <p>Provide contextual feedback messages for typical user actions.</p>
  </div>
  <div class="alert-sticky-buttons u-flex">
    <button class="button is-text is-small"><span class="text">Action 1</span></button>
    <button class="button is-text is-small"><span class="text">Action 2</span></button>
  </div>
</section>
Class Type
is-success Success Use this alert to inform the user of a task that has been completed successfully.
This is a default alert

Some description about the alert sent to the user.

<section class="alert is-success">
  <div class="alert-grid">
    <button
      class="button is-text is-only-icon"
      style="--button-size:1.5rem;"
      aria-label="close alert box"
    >
      <span class="icon-x" aria-hidden="true"></span>
    </button>
    <span class="icon-info" aria-hidden="true"></span>
    <div class="alert-content">
      <h6 class="alert-title">This is a default alert</h6>
      <p class="alert-message">Some description about the alert sent to the user.</p>
      <div class="alert-buttons u-flex">
        <button class="button is-text"><span class="text">Action 1</span></button>
        <button class="button is-text"><span class="text">Action 2</span></button>
      </div>
    </div>
  </div>
</section>
This is a standalone alert

Some description about the alert sent to the user.

<section class="alert is-standalone is-success">
  <div class="alert-grid">
    <button
      class="button is-text is-only-icon"
      style="--button-size:1.5rem;"
      aria-label="close alert box"
    >
      <span class="icon-x" aria-hidden="true"></span>
    </button>
    <span class="icon-info" aria-hidden="true"></span>
    <div class="alert-content">
      <h6 class="alert-title">This is a standalone alert</h6>
      <p class="alert-message">Some description about the alert sent to the user.</p>
      <div class="alert-buttons u-flex">
        <button class="button is-text"><span class="text">Action 1</span></button>
        <button class="button is-text"><span class="text">Action 2</span></button>
      </div>
    </div>
  </div>
</section>
This is a default alert

Some description about the alert sent to the user.

<section class="alert is-action is-success">
  <div class="alert-grid">
    <span class="icon-info" aria-hidden="true"></span>
    <div class="alert-content">
      <h6 class="alert-title">This is a default alert</h6>
      <p class="alert-message">Some description about the alert sent to the user.</p>
    </div>
    <div class="alert-buttons u-flex u-gap-16 u-cross-child-center">
      <button class="button is-text is-full-width-mobile">
        <span class="text">Secondary call to action</span>
      </button>
      <button class="button is-secondary is-full-width-mobile">
        <span class="text">Call to action</span>
      </button>
    </div>
  </div>
</section>

Alert Sticky Title

Provide contextual feedback messages for typical user actions.

<section class="alert-sticky is-success">
  <button
    class="button is-text is-only-icon"
    style="--button-size:1.5rem;"
    aria-label="close alert"
  >
    <span class="icon-x" aria-hidden="true"></span>
  </button>
  <div class="alert-sticky-image"><span class="icon-info" aria-hidden="true"></span></div>
  <div class="alert-sticky-content">
    <h4 class="alert-sticky-title">Alert Sticky Title</h4>
    <p>Provide contextual feedback messages for typical user actions.</p>
  </div>
  <div class="alert-sticky-buttons u-flex">
    <button class="button is-text is-small"><span class="text">Action 1</span></button>
    <button class="button is-text is-small"><span class="text">Action 2</span></button>
  </div>
</section>
Class Type
is-warning Warning Use this alert to warn the user that action may be required depending on the context.
This is a default alert

Some description about the alert sent to the user.

<section class="alert is-warning">
  <div class="alert-grid">
    <button
      class="button is-text is-only-icon"
      style="--button-size:1.5rem;"
      aria-label="close alert box"
    >
      <span class="icon-x" aria-hidden="true"></span>
    </button>
    <span class="icon-info" aria-hidden="true"></span>
    <div class="alert-content">
      <h6 class="alert-title">This is a default alert</h6>
      <p class="alert-message">Some description about the alert sent to the user.</p>
      <div class="alert-buttons u-flex">
        <button class="button is-text"><span class="text">Action 1</span></button>
        <button class="button is-text"><span class="text">Action 2</span></button>
      </div>
    </div>
  </div>
</section>
This is a standalone alert

Some description about the alert sent to the user.

<section class="alert is-standalone is-warning">
  <div class="alert-grid">
    <button
      class="button is-text is-only-icon"
      style="--button-size:1.5rem;"
      aria-label="close alert box"
    >
      <span class="icon-x" aria-hidden="true"></span>
    </button>
    <span class="icon-info" aria-hidden="true"></span>
    <div class="alert-content">
      <h6 class="alert-title">This is a standalone alert</h6>
      <p class="alert-message">Some description about the alert sent to the user.</p>
      <div class="alert-buttons u-flex">
        <button class="button is-text"><span class="text">Action 1</span></button>
        <button class="button is-text"><span class="text">Action 2</span></button>
      </div>
    </div>
  </div>
</section>
This is a default alert

Some description about the alert sent to the user.

<section class="alert is-action is-warning">
  <div class="alert-grid">
    <span class="icon-info" aria-hidden="true"></span>
    <div class="alert-content">
      <h6 class="alert-title">This is a default alert</h6>
      <p class="alert-message">Some description about the alert sent to the user.</p>
    </div>
    <div class="alert-buttons u-flex u-gap-16 u-cross-child-center">
      <button class="button is-text is-full-width-mobile">
        <span class="text">Secondary call to action</span>
      </button>
      <button class="button is-secondary is-full-width-mobile">
        <span class="text">Call to action</span>
      </button>
    </div>
  </div>
</section>

Alert Sticky Title

Provide contextual feedback messages for typical user actions.

<section class="alert-sticky is-warning">
  <button
    class="button is-text is-only-icon"
    style="--button-size:1.5rem;"
    aria-label="close alert"
  >
    <span class="icon-x" aria-hidden="true"></span>
  </button>
  <div class="alert-sticky-image"><span class="icon-info" aria-hidden="true"></span></div>
  <div class="alert-sticky-content">
    <h4 class="alert-sticky-title">Alert Sticky Title</h4>
    <p>Provide contextual feedback messages for typical user actions.</p>
  </div>
  <div class="alert-sticky-buttons u-flex">
    <button class="button is-text is-small"><span class="text">Action 1</span></button>
    <button class="button is-text is-small"><span class="text">Action 2</span></button>
  </div>
</section>
Class Type
is-danger Danger/Error Use this alert to warn the user about errors, and how they can fix the problem.
This is a default alert

Some description about the alert sent to the user.

<section class="alert is-danger">
  <div class="alert-grid">
    <button
      class="button is-text is-only-icon"
      style="--button-size:1.5rem;"
      aria-label="close alert box"
    >
      <span class="icon-x" aria-hidden="true"></span>
    </button>
    <span class="icon-info" aria-hidden="true"></span>
    <div class="alert-content">
      <h6 class="alert-title">This is a default alert</h6>
      <p class="alert-message">Some description about the alert sent to the user.</p>
      <div class="alert-buttons u-flex">
        <button class="button is-text"><span class="text">Action 1</span></button>
        <button class="button is-text"><span class="text">Action 2</span></button>
      </div>
    </div>
  </div>
</section>
This is a standalone alert

Some description about the alert sent to the user.

<section class="alert is-standalone is-danger">
  <div class="alert-grid">
    <button
      class="button is-text is-only-icon"
      style="--button-size:1.5rem;"
      aria-label="close alert box"
    >
      <span class="icon-x" aria-hidden="true"></span>
    </button>
    <span class="icon-info" aria-hidden="true"></span>
    <div class="alert-content">
      <h6 class="alert-title">This is a standalone alert</h6>
      <p class="alert-message">Some description about the alert sent to the user.</p>
      <div class="alert-buttons u-flex">
        <button class="button is-text"><span class="text">Action 1</span></button>
        <button class="button is-text"><span class="text">Action 2</span></button>
      </div>
    </div>
  </div>
</section>
This is a default alert

Some description about the alert sent to the user.

<section class="alert is-action is-danger">
  <div class="alert-grid">
    <span class="icon-info" aria-hidden="true"></span>
    <div class="alert-content">
      <h6 class="alert-title">This is a default alert</h6>
      <p class="alert-message">Some description about the alert sent to the user.</p>
    </div>
    <div class="alert-buttons u-flex u-gap-16 u-cross-child-center">
      <button class="button is-text is-full-width-mobile">
        <span class="text">Secondary call to action</span>
      </button>
      <button class="button is-secondary is-full-width-mobile">
        <span class="text">Call to action</span>
      </button>
    </div>
  </div>
</section>

Alert Sticky Title

Provide contextual feedback messages for typical user actions.

<section class="alert-sticky is-danger">
  <button
    class="button is-text is-only-icon"
    style="--button-size:1.5rem;"
    aria-label="close alert"
  >
    <span class="icon-x" aria-hidden="true"></span>
  </button>
  <div class="alert-sticky-image"><span class="icon-info" aria-hidden="true"></span></div>
  <div class="alert-sticky-content">
    <h4 class="alert-sticky-title">Alert Sticky Title</h4>
    <p>Provide contextual feedback messages for typical user actions.</p>
  </div>
  <div class="alert-sticky-buttons u-flex">
    <button class="button is-text is-small"><span class="text">Action 1</span></button>
    <button class="button is-text is-small"><span class="text">Action 2</span></button>
  </div>
</section>

Best Practice

Alerts should contain at minimum a description to give the user enough information to help them understand the purpose of the alert and if something needs to be done. Where necessary, a title can provide context. Alert messaging should be consistent across the application.

human readable language
human readable language

Do

Use human-readable language in your alerts to explain the purpose of the alert, and provide a call to action where necessary.

generic language
generic language

Don't

Show overly generic or patronizing messages in your alerts.