ToastContainer

import { ToastContainer } from '@enmovil/ui-design-system';

Shows short toast messages in info, success, error or warning styles. Render ToastContainer once, then call showToast() from anywhere with a message, type and duration.

Properties

Property	Type	Required	Default	Allowed values	Description
type	string	No	—	'success', 'error', 'info', 'warning'	Colour of the toast, info (the default), success, error or warning.
message	string	No	—	—	Text shown in the toast.
closable	boolean	No	—	—	Shows a close button on the toast. Off by default, so the toast only closes when duration runs out.
duration	number	No	—	—	How long the toast stays open, in milliseconds. Defaults to 3000.
icon	string	No	—	—	Name of an Icon shown before the message. No icon is shown without it.
pauseOnHover	boolean	No	—	—	Stops the auto-close timer while hovered; it restarts from the full duration when the pointer leaves. Default false.

Events

Name	Signature	When it fires
onClose	function	Fires when the toast closes, either when duration runs out or from the close button.
onClick	function	Fires when the toast is clicked. Not fired by the close button.
onMouseEnter	function	Fires when the pointer enters the toast.
onMouseLeave	function	Fires when the pointer leaves the toast.

Children

ToastContainer does not accept children.

Variants

Loading examples…

Playground

Change the controls to see how the properties affect the component. Values the controls don't cover come from the Info example.

Loading playground…

Storybook

Open ToastContainer in Storybook to try every story with the full set of controls.