Skip to main content
🏠ComponentsAlertVersion: 2.0.0-beta.6

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