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

Alert severity

The alert offers five severity levels that set a distinctive icon and color.

<qtm-alert
  message="This is an error alert — check it out!"
  severity="error"
  dismissible="false"
></qtm-alert>
<qtm-alert
  message="This is an warning alert — check it out!"
  severity="warning"
  dismissible="false"
></qtm-alert>
<qtm-alert
  message="This is an success alert — check it out!"
  severity="success"
  dismissible="false"
></qtm-alert>
<qtm-alert
  message="This is an informative alert — check it out!"
  severity="informative"
  dismissible="false"
></qtm-alert>
<qtm-alert
  message="This is an neutral alert — check it out!"
  severity="neutral"
  dismissible="false"
></qtm-alert>

Title

You can use title property to display a formatted title.

<qtm-alert
  message="This is an informative alert — check it out!"
  severity="informative"
  title="Title"
  dismissible="false"
></qtm-alert>

Message

You can use message property or children to display a formatted message.

This is an error alert — check it out!

<qtm-alert severity="error" title="Error" dismissible="false">
  This is an error alert — <strong>check it out!</strong>
</qtm-alert>

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 action buttons to an alert, set actionButtons property to an array of action buttons.

By default a close button is displayed. You can remove it by setting the dismissible prop to false.

<script>
const actions = [
  { text: 'UNDO', icon: 'undo', onClick: () => {} }
]
const handleClosedAlert = ($event) => {}
<script>

<qtm-alert
  message="This is an informative alert — check it out!"
  severity="informative"
  :actionButtons.prop="actions"
  @close="handleClosedAlert($event)"
></qtm-alert>

Icons

You can change the default severity to icon mapping with the iconMapping prop.

By default, the iconMapping has the following format:

{
  informative: 'info',
  success: 'check_circle',
  error: 'error_outline',
  warning: 'warning_amber',
};

<script>
const iconMapping = { success: 'done' }
<script>

<qtm-alert
  message="This is an success alert"
  severity="success"
  dismissible="false"
  :iconMapping.prop="iconMapping"
></qtm-alert>

Color

The color prop will override the default color for the specified severity.

<qtm-alert
  message="This is an alert with an error color — check it out!"
  color="error"
  dismissible="false"
></qtm-alert>
<qtm-alert
  message="This is an alert with a warning color — check it out!"
  color="warning"
  dismissible="false"
></qtm-alert>
<qtm-alert
  message="This is an alert with a success color — check it out!"
  color="success"
  dismissible="false"
></qtm-alert>
<qtm-alert
  message="This is an alert with an informative — check it out!"
  color="informative"
  dismissible="false"
></qtm-alert>
<qtm-alert
  message="This is an alert with a neutral color — check it out!"
  color="neutral"
  dismissible="false"
></qtm-alert>
...

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.

The emphasis prop will change the emphasis style alert.

Error color

Warning color

Success color

Informative color

Neutral color

<qtm-alert
  message="This is an error alert with low emphasis — check it out!"
  severity="error"
  emphasis="low"
></qtm-alert>
<qtm-alert
  message="This is an error alert with medium emphasis — check it out!"
  severity="error"
  emphasis="medium"
></qtm-alert>
<qtm-alert
  message="This is an error alert with high emphasis — check it out!"
  severity="error"
  emphasis="high"
></qtm-alert>

Size

For larger or smaller alerts, use the size prop

<qtm-alert
  message="This is an informative alert — check it out!"
  severity="informative"
  title="Title"
  size="small"
></qtm-alert>
<qtm-alert
  message="This is an informative alert — check it out!"
  severity="informative"
  title="Title"
  size="medium"
></qtm-alert>
<qtm-alert
  message="This is an informative alert — check it out!"
  severity="informative"
  title="Title"
  size="large"
></qtm-alert>

API

qtm-alert

Property	Type	Default	Description
actionButtons	ActionButton[]	[]	List of action buttons to display. An action button must be an Object with a text, icon and onClick properties.
classes	string		list of classes to override or extend the styles applied to the component. You can use available utility classes by importing
color	"error" | "informative" | "neutral" | "success" | "warning"		Used to override the default color of the specified severity.
dismissible	boolean	true	If true, the alert has a close button. If it is clicked, the alert component is removed from the DOM.
emphasis	"high" | "low" | "medium"	'medium'	High-emphasis alerts are best for critical messaging while low-emphasis and mid-emphasis alerts are less visually disruptive for users
iconMapping	{ informative?: string; neutral?: string; error?: string; warning?: string; success?: string; }	{ informative: 'info', neutral: 'info', success: 'check_circle', error: 'error_outline', warning: 'warning_amber', }	The component maps the severity prop to a range of different icons, ex: for instance success to check_circle. If you wish to change this mapping, you can provide your own.
leftIcon	boolean	true	Set to false to remove the icon in alert message
message	string		The alert message
severity	"error" | "informative" | "neutral" | "success" | "warning"	'informative'	The semantic color of alert
size	"large" | "medium" | "small"	'medium'	The size of the alert
title	string		The alert title

Event	Type	Description
close	CustomEvent<void>	Callback fired when the alert close button is clicked. function(event: object) => void