Alert
Style
An alert is a layout including an icon, title, text, actions, and a close button. It comes in a variety of colors depending on status. A toast is a variant of alert. Instead of having a background color, it has a white background with a drop shadow.
Anatomy
- Status icon
- Title
- Body text
- Action buttons
- Close button
- Color background
- White background with drop shadow
Variants
Inline
The default alert is inline. At minimum, the status icon and title need to be visible.
Inline alternate
There is an alternate inline alert where the border covers all sides.
Toast
Same as the inline alert, at minimum, the status icon and title need to be visible.
Space
Interaction states
Refer to these documentation pages for interaction states:
