Component Alert

Alerts let the user know of things such as updates and emergency information through a banner that runs across the top of the screen. They can be coded as to be dismissible by the user.

Get the UI kit

Code

Example

Informational alert

This is an important message that your user should know about.

Success alert

Let the user know that they successfully accomplished a task.

Warning alert

Warn the user about something.

Error Alert

Inform the user about an error that has occurred.

Props

Attr	Type	Default	Docs
dismissible	boolean	false	This property determines if an alert can be dismissed.
headline	string		This property sets the headline of the alert.
hidden	boolean	false	This boolean sets the initial state of alert.
no-icon	boolean	false	This boolean sets whether to include an icon or not.
type	"error" \| "info" \| "success" \| "warning"	'success'	This property styles the component which includes color and default icon.

Methods

Name	Returns	Docs
hide	Promise will resolve after alert is hidden.	This public method is used to hide an alert.
show	Promise will resolve after alert is shown.	This public method is used to show an alert.

Events

Event	Detail	Docs
somDismissed	void	This event is emitted when the alert is dismissed.

Get in touch

Do you have an idea, or want to help us improve this page? Reach out to us via email.

DTMB-DG-Support@michigan.gov

Need help? Visit our Support page to learn how to get assistance, troubleshoot issues, and connect with the team.