Alert
<mo-alert> | MOAlert
Alerts are used to display important messages inline or as toast notifications.
<mo-alert open> This is a standard alert. You can customize its content and even the icon. </mo-alert>
import { MOAlert, MOIcon } from '@metsooutotec/modes-web-components/dist/react'; const App = () => <MOAlert open>This is a standard alert. You can customize its content and even the icon.</MOAlert>;
Alerts will not be visible if the open
attribute is not present.
Alert examples
Variants
Set the variant
attribute to change the alert’s variant.
You can tell by how pretty the alert is.
Secondary
Settings will take effect on next login.
Info
Settings will take effect on next login.
Success
You can safely exit the app now.
Warning
Please login again to continue.
Alert
We’re very sorry to see you go!
Primary <mo-alert variant="primary" open> <strong>This is super informative</strong><br /> You can tell by how pretty the alert is. </mo-alert> <br /> Secondary <mo-alert variant="secondary" open> <strong>Your settings have been updated</strong><br /> Settings will take effect on next login. </mo-alert> <br /> Info <mo-alert variant="info" open> <strong>Your settings have been updated</strong><br /> Settings will take effect on next login. </mo-alert> <br /> Success <mo-alert variant="success" open> <strong>Your changes have been saved</strong><br /> You can safely exit the app now. </mo-alert> <br /> Warning <mo-alert variant="warning" open> <strong>Your session has ended</strong><br /> Please login again to continue. </mo-alert> <br /> Alert <mo-alert variant="alert" open> <strong>Your account has been deleted</strong><br /> We're very sorry to see you go! </mo-alert>
import { MOAlert, MOIcon } from '@metsooutotec/modes-web-components/dist/react'; const App = () => ( <> <MOAlert variant="primary" open> <strong>This is super informative</strong> <br /> You can tell by how pretty the alert is. </MOAlert> <br /> <MOAlert variant="success" open> <strong>Your changes have been saved</strong> <br /> You can safely exit the app now. </MOAlert> <br /> <MOAlert variant="secondary" open> <strong>Your settings have been updated</strong> <br /> Settings will take effect on next login. </MOAlert> <br /> <MOAlert variant="warning" open> <strong>Your session has ended</strong> <br /> Please login again to continue. </MOAlert> <br /> <MOAlert variant="alert" open> <strong>Your accounts has been deleted</strong> <br /> We're very sorry to see you go! </MOAlert> </> );
Without icons
Icons are enabled by default but are optional. Simply enable the withoutIcon
attribute if you
don’t want them.
<mo-alert variant="primary" withoutIcon open> Nothing fancy here, just a simple alert. </mo-alert>
import { MOAlert } from '@metsooutotec/modes-web-components/dist/react'; const App = () => ( <MOAlert withoutIcon variant="primary" open> Nothing fancy here, just a simple alert. </MOAlert> );
Duration
Set the duration
attribute to automatically hide an alert after a period of time. This is
useful for alerts that don’t require acknowledgement.
<div class="alert-duration"> <mo-button variant="primary">Show Alert</mo-button> <mo-alert variant="primary" duration="3000" closable> <mo-icon slot="icon" name="info"></mo-icon> This alert will automatically hide itself after three seconds, unless you interact with it. </mo-alert> </div> <script> const container = document.querySelector('.alert-duration'); const button = container.querySelector('mo-button'); const alert = container.querySelector('mo-alert'); button.addEventListener('click', () => alert.show()); </script> <style> .alert-duration mo-alert { margin-top: var(--mo-spacing-medium); } </style>
import { useState } from 'react'; import { MOAlert, MOButton, MOIcon } from '@metsooutotec/modes-web-components/dist/react'; const css = ` .alert-duration mo-alert { margin-top: var(--mo-spacing-medium); } `; const App = () => { const [open, setOpen] = useState(false); return ( <> <div className="alert-duration"> <MOButton variant="primary" onClick={() => setOpen(true)}> Show Alert </MOButton> <MOAlert variant="primary" duration="3000" open={open} closable onMoAfterHide={() => setOpen(false)}> This alert will automatically hide itself after three seconds, unless you interact with it. </MOAlert> </div> <style>{css}</style> </> ); };
Toast examples
Toast notifications
To display an alert as a toast notification, or “toast”, create the alert and call its
toast()
method. This will move the alert out of its position in the DOM and into
the toast stack where it will be shown. Once dismissed, it will be removed
from the DOM completely. To reuse a toast, store a reference to it and call toast()
again later
on.
You should always use the closable
attribute so users can dismiss the notification. It’s also
common to set a reasonable duration
when the notification doesn’t require acknowledgement.
You can tell by how pretty the alert is.
Settings will take effect on next login.
Settings will take effect on next login.
You can safely exit the app now.
Please login again to continue.
We’re very sorry to see you go!
<div class="alert-toast"> <mo-button variant="primary">Primary</mo-button> <mo-button variant="secondary">Secondary</mo-button> <mo-button variant="info" class="info">Info</mo-button> <mo-button variant="success" class="success">Success</mo-button> <mo-button variant="warning" class="warning">Warning</mo-button> <mo-button variant="alert" class="alert">Alert</mo-button> <mo-alert variant="primary" duration="3000" closable> <strong>This is super informative</strong><br /> You can tell by how pretty the alert is. </mo-alert> <mo-alert variant="secondary" duration="3000" closable> <strong>Your settings have been updated</strong><br /> Settings will take effect on next login. </mo-alert> <mo-alert variant="info" duration="3000" closable> <strong>Your settings have been updated</strong><br /> Settings will take effect on next login. </mo-alert> <mo-alert variant="success" duration="3000" closable> <strong>Your changes have been saved</strong><br /> You can safely exit the app now. </mo-alert> <mo-alert variant="warning" duration="3000" closable> <strong>Your session has ended</strong><br /> Please login again to continue. </mo-alert> <mo-alert variant="alert" duration="3000" closable> <strong>Your account has been deleted</strong><br /> We're very sorry to see you go! </mo-alert> </div> <!-- For demo purposes only --> <style> mo-button.info::part(base) { background-color: var(--mo-color-status-info); color: var(--mo-color-status-on-info); border-color: var(--mo-color-status-on-info); } mo-button.success::part(base) { background-color: var(--mo-color-status-success); color: var(--mo-color-status-on-success); border-color: var(--mo-color-status-on-success); } mo-button.warning::part(base) { background-color: var(--mo-color-status-warning); color: var(--mo-color-status-on-warning); border-color: var(--mo-color-status-on-warning); } mo-button.alert::part(base) { background-color: var(--mo-color-status-alert); color: var(--mo-color-status-on-alert); border-color: var(--mo-color-status-on-alert); } </style> <script> const container = document.querySelector('.alert-toast'); ['primary', 'secondary', 'info', 'success', 'warning', 'alert'].map(variant => { const button = container.querySelector(`mo-button[variant="${variant}"]`); const alert = container.querySelector(`mo-alert[variant="${variant}"]`); button.addEventListener('click', () => alert.toast()); }); </script>
import { useRef } from 'react'; import { MOAlert, MOButton, MOIcon } from '@metsooutotec/modes-web-components/dist/react'; function showToast(alert) { alert.toast(); } const App = () => { const primary = useRef(null); const success = useRef(null); const secondary = useRef(null); const warning = useRef(null); const alert = useRef(null); return ( <> <MOButton variant="primary" onClick={() => primary.current.toast()}> Primary </MOButton> <MOButton variant="secondary" onClick={() => secondary.current.toast()}> Secondary </MOButton> <MOButton variant="success" onClick={() => success.current.toast()}> Success </MOButton> <MOButton variant="warning" onClick={() => warning.current.toast()}> Warning </MOButton> <MOButton variant="alert" onClick={() => alert.current.toast()}> Alert </MOButton> <MOAlert ref={primary} variant="primary" duration={3000} closable> <strong>This is super informative</strong> <br /> You can tell by how pretty the alert is. </MOAlert> <MOAlert ref={secondary} variant="secondary" duration={3000} closable> <strong>Your settings have been updated</strong> <br /> Settings will take effect on next login. </MOAlert> <MOAlert ref={success} variant="success" duration={3000} closable> <strong>Your changes have been saved</strong> <br /> You can safely exit the app now. </MOAlert> <MOAlert ref={warning} variant="warning" duration={3000} closable> <strong>Your session has ended</strong> <br /> Please login again to continue. </MOAlert> <MOAlert ref={alert} variant="alert" duration={3000} closable> <strong>Your accounts has been deleted.</strong> <br /> We're very sorry to see you go! </MOAlert> </> ); };
Creating toasts imperatively
For convenience, you can create a utility that emits toast notifications with a function call rather than
composing them in your HTML. To do this, generate the alert with JavaScript, append it to the body, and call
the toast()
method as shown in the example below.
<div class="alert-toast-wrapper"> <mo-button variant="primary">Create Toast</mo-button> </div> <script> const container = document.querySelector('.alert-toast-wrapper'); const button = container.querySelector('mo-button'); let count = 0; // Always escape HTML for text arguments! function escapeHtml(html) { const div = document.createElement('div'); div.textContent = html; return div.innerHTML; } // Custom function to emit toast notifications function notify(message, variant = 'primary', icon = 'info', duration = 3000) { const alert = Object.assign(document.createElement('mo-alert'), { variant, closable: true, duration: duration, innerHTML: ` <mo-icon name="${icon}" slot="icon"></mo-icon> ${escapeHtml(message)} ` }); document.body.append(alert); return alert.toast(); } button.addEventListener('click', () => { notify(`This is custom toast #${++count}`); }); </script>
The toast stack
The toast stack is a fixed position singleton element created and managed internally by the alert component. It will be added and removed from the DOM as needed when toasts are shown. When more than one toast is visible, they will stack vertically in the toast stack.
By default, the toast stack is positioned at the top-right of the viewport. You can change its position by
targeting .mo-toast-stack
in your stylesheet. To make toasts appear at the top-left of the
viewport, for example, use the following styles.
.mo-toast-stack { left: 0; right: auto; }
By design, it is not possible to show toasts in more than one stack simultaneously. Such behavior is confusing and makes for a poor user experience.
Importing
If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free to use any of the following snippets to cherry pick this component.
To import this component using a bundler:
import '@metsooutotec/modes-web-components/dist/components/alert/alert.js';
To import this component as a React component:
import MOAlert from '@metsooutotec/modes-web-components/dist/react/alert/';
To import this component using a script tag:
<script type="module" src="https://modes-web.metso.com/dist/components/cdn/components/alert/alert.js"></script>
Slots
Name | Description |
---|---|
(default) | The alert’s content. |
icon
|
An icon to show in the alert. |
close-button
|
A custom close button. |
Learn more about using slots.
Properties
Name | Description | Reflects | Type | Default |
---|---|---|---|---|
open
|
Indicates whether or not the alert is open. You can use this in lieu of the show/hide methods. |
|
boolean
|
false
|
closable
|
Makes the alert closable. |
|
boolean
|
true
|
withoutIcon
|
Allows users to have no icon with the alert. |
|
boolean
|
false
|
variant
|
The alert’s variant. |
|
'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'alert'
|
'primary'
|
duration
|
The length of time, in milliseconds, the alert will show before closing itself. If the user
interacts with the alert before it closes (e.g. moves the mouse over it), the timer will restart.
Defaults to Infinity .
|
- |
Infinity
|
|
updateComplete |
A read-only promise that resolves when the component has finished updating. |
Learn more about attributes and properties.
Events
Name | React Event | Description | Event Detail |
---|---|---|---|
mo-show |
onMoShow |
Emitted when the alert opens. | - |
mo-after-show |
onMoAfterShow |
Emitted after the alert opens and all animations are complete. | - |
mo-hide |
onMoHide |
Emitted when the alert closes. | - |
mo-after-hide |
onMoAfterHide |
Emitted after the alert closes and all animations are complete. | - |
Learn more about events.
Methods
Name | Description | Arguments |
---|---|---|
show() |
Shows the alert. | - |
hide() |
Hides the alert | - |
toast() |
Displays the alert as a toast notification. This will move the alert out of its position in the DOM and, when dismissed, it will be removed from the DOM completely. By storing a reference to the alert, you can reuse it by calling this method again. The returned promise will resolve after the alert is hidden. | - |
Learn more about methods.
Custom Properties
Name | Description | Default |
---|---|---|
--alert-box-shadow |
The alert’s box shadow. | |
--alert-padding |
The alert’s internal padding. |
Learn more about customizing CSS custom properties.
Parts
Name | Description |
---|---|
base |
The component’s internal wrapper. |
icon |
The container that wraps the alert icon. |
message |
The alert message. |
close-button |
The close button. |
close-button__base |
The close button’s base part. |
Learn more about customizing CSS parts.
Animations
Name | Description |
---|---|
alert.show |
The animation to use when showing the alert. |
alert.hide |
The animation to use when hiding the alert. |
Learn more about customizing animations.
Dependencies
This component automatically imports the following dependencies.