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.

error_outline

This is an error alert — check it out!

warning_amber

This is a warning alert — check it out!

check_circle

This is a success alert — check it out!

info

This is an informative alert — check it out!

info

This is a neutral alert — check it out!

<Alert
  message="This is an error alert — check it out!"
  severity="error"
  dismissible={false}
></Alert>
<Alert
  message="This is a warning alert — check it out!"
  severity="warning"
  dismissible={false}
></Alert>
<Alert
  message="This is a success alert — check it out!"
  severity="success"
  dismissible={false}
></Alert>
<Alert
  message="This is an informative alert — check it out!"
  severity="informative"
  dismissible={false}
></Alert>
<Alert
  message="This is a neutral alert — check it out!"
  severity="neutral"
  dismissible={false}
></Alert>

Alert with title

You can add a title to your alert using the title prop.

error_outline

Error

This is an error alert — check it out!

warning_amber

Warning

This is a warning alert — check it out!

check_circle

Success

This is a success alert — check it out!

info

Info

This is an informative alert — check it out!

info

Neutral

This is a neutral alert — check it out!

<Alert
  title="Error"
  message="This is an error alert — check it out!"
  severity="error"
  dismissible={false}
></Alert>
<Alert
  title="Warning"
  message="This is a warning alert — check it out!"
  severity="warning"
  dismissible={false}
></Alert>
<Alert
  title="Success"
  message="This is a success alert — check it out!"
  severity="success"
  dismissible={false}
></Alert>
<Alert
  title="Info"
  message="This is an informative alert — check it out!"
  severity="informative"
  dismissible={false}
></Alert>
<Alert
  title="Neutral"
  message="This is a neutral alert — check it out!"
  severity="neutral"
  dismissible={false}
></Alert>

Alert with action buttons

You can add action buttons to your alert using the actionButtons prop.

info

This is an alert with an action button

<Alert
  message="This is an alert with an action button"
  severity="informative"
  actionButtons={[{ text: 'UNDO' }]}
></Alert>

Alert emphasis

Alerts can have different emphasis levels: low, medium (default), and high.

error_outline

This is an error alert with low emphasis — check it out!

error_outline

This is an error alert with medium emphasis — check it out!

error_outline

This is an error alert with high emphasis — check it out!

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

Size

For larger or smaller alerts, use the size prop

info

Title

This is an informative alert — check it out!

info

Title

This is an informative alert — check it out!

info

Title

This is an informative alert — check it out!

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

Event handling

You can handle events when the alert's close button or action buttons are clicked.

info

This is an alert with event handling

const handleClose = () => {
  console.log('Close button clicked');
  // Add your close logic here
};

const handleAction = () => {
  console.log('Action button clicked');
  // Add your action logic here
};

<Alert
  message="This is an alert with event handling"
  severity="informative"
  onClose={handleClose}
  actionButtons={[{ 
    text: 'ACTION', 
    onClick: handleAction 
  }]}
></Alert>

API

QtmAlert

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
onClose	CustomEvent<void>	Callback fired when the alert close button is clicked. function(event: object) => void