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.
<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>
Title
You can use title
property to display a formatted title.
<Alert
message="This is an informative alert — check it out!"
severity="informative"
title="Title"
dismissible={false}
></Alert>
Message
You can use message
property or children to display a formatted message.
<Alert severity="error" title="Error" dismissible={false}>
This is an error alert — <strong>check it out!</strong>
</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.
<Alert
message="This is an informative alert — check it out!"
severity="informative"
actionButtons={[{ text: 'UNDO', icon: 'undo', onClick: () => {} }]}
onClose={(event) => console.log('close', event)}
></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',
};
<Alert
message="This is a success alert"
severity="success"
dismissible={false}
iconMapping={{ success: 'done' }}
></Alert>
Color
The color
prop will override the default color for the specified severity.
<Alert
message="This is an alert with an error color — check it out!"
color="error"
dismissible={false}
></Alert>
<Alert
message="This is an alert with a warning color — check it out!"
color="warning"
dismissible={false}
></Alert>
<Alert
message="This is an alert with a success color — check it out!"
color="success"
dismissible={false}
></Alert>
<Alert
message="This is an alert with an informative — check it out!"
color="informative"
dismissible={false}
></Alert>
<Alert
message="This is an alert with a neutral color — check it out!"
color="neutral"
dismissible={false}
></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
<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
<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>