Alert

Alerts inform the user of important information or important action required. They are non-disruptive to a user's experience and do not require to interrupt the user’s task.

Basic alerts

The alert offers four severity levels that set a distinctive icon and color. qtm-error, qtm-warning, qtm-success, qtm-informative, qtm-neutral.

<div class="qtm-alert qtm-error">
  <div class="qtm-left-content">
    <i class="qtm-icon material-icons-outlined">error_outline</i>
    <div class="qtm-message">This is an error alert — check it out!</div>
  </div>
</div>
<div class="qtm-alert qtm-warning">
  <div class="qtm-left-content">
    <i class="qtm-icon material-icons-outlined">warning_amber</i>
    <div class="qtm-message">This is a warning alert — check it out!</div>
  </div>
</div>
<div class="qtm-alert qtm-success">
  <div class="qtm-left-content">
    <i class="qtm-icon material-icons-outlined">check_circle</i>
    <div class="qtm-message">This is a success alert — check it out!</div>
  </div>
</div>
<div class="qtm-alert qtm-informative">
  <div class="qtm-left-content">
    <i class="qtm-icon material-icons-outlined">info</i>
    <div class="qtm-message">This is an informative alert — check it out!</div>
  </div>
</div>
<div class="qtm-alert qtm-neutral">
  <div class="qtm-left-content">
    <i class="qtm-icon material-icons-outlined">info</i>
    <div class="qtm-message">This is a neutral alert — check it out!</div>
  </div>
</div>

You can use the the qtm-title to display a formatted title.

<div class="qtm-alert qtm-informative">
  <div class="qtm-left-content">
    <i class="qtm-icon material-icons-outlined">info</i>
    <div class="qtm-message">
      <div class="qtm-title">Title</div>
      <div>This is an informative alert — check it out!</div>
    </div>
  </div>
</div>

Action buttons

An alert can have actions, such as a close or undo button. It is rendered after the message, at the end of the alert. To add actions, insert it into a container with the qtm-right-actions class.

<div class="qtm-alert qtm-informative">
  <div class="qtm-left-content">
    <i class="qtm-icon material-icons-outlined">info</i>
    <div class="qtm-message">
      <div>This is an informative alert — check it out!</div>
    </div>
  </div>
  <div class="qtm-right-actions">
    <button class="qtm-button qtm-ghost qtm-neutral qtm-medium">
      <i class="qtm-icon material-icons-outlined">undo</i>
      <span>UNDO</span>
    </button>
    <button class="qtm-button qtm-ghost qtm-neutral qtm-medium">
      <i class="qtm-icon material-icons-outlined">close</i>
    </button>
  </div>
</div>

Icons

• The error alert has an error_outline icon.
• The warning alert has a warning_amber icon.
• The success alert has an incheck_circle icon.
• The informative alert has an info icon.

<div class="qtm-alert qtm-warning">
  <div class="qtm-left-content">
    <i class="qtm-icon material-icons-outlined">warning_amber</i>
    <div class="qtm-message">...</div>
  </div>
</div>

Color

Semantic colors can be used to change the alert color : qtm-error, qtm-warning, qtm-success, qtm-informative, qtm-neutral

<div class="qtm-alert qtm-error">...</div>
<div class="qtm-alert qtm-warning">...</div>
<div class="qtm-alert qtm-success">...</div>
<div class="qtm-alert qtm-informative">...</div>
<div class="qtm-alert qtm-neutral">...</div>

Low / Medium / High emphasis

The Quantum supports three levels of emphasis style alerts. High-emphasis alerts are best for critical messaging while low-emphasis and mid-emphasis alerts are less visually disruptive for users.

Error color

Warning color

Success color

Informative color

Neutral color

<div class="qtm-alert qtm-error qtm-low-emphasis">...</div>
<div class="qtm-alert qtm-error qtm-medium-emphasis">...</div>
<div class="qtm-alert qtm-error qtm-high-emphasis">...</div>
...

Size

For larger or smaller alerts, use the qtm-small, qtm-medium, qtm-large classes.

<div class="qtm-alert qtm-informative qtm-small">...</div>
<div class="qtm-alert qtm-informative qtm-medium">...</div>
<div class="qtm-alert qtm-informative qtm-large">...</div>