Alert
- Selector
[role="alert"],.alert
The alert comes in four flavors, each coming with its own icon, depending on the type of message that you want to convey. Alerts should be important or time sensitive messages.
Did you know that alert content interrupts screen readers?
Your order for more mangos has been successfully submitted.
You have one mango left!
You are all out of mangos!
The "alert" role interrupts screen readers to read the alert message. If this
behavior isn't desired, you can also use the .alert class to apply the styles
instead.
If the icons don't fit the message, they can be removed by using the .no-icon class
on the container