Overlays
Overlays sit on top of the page to demand attention or give feedback. Cherry provides two overlay elements: the Modal for blocking dialogs and the Toast for transient notifications.
Modal
The modal is a centered dialog on a primary-tinted backdrop. It has an optional title with a divider, scrollable content, and a close icon button in the corner.
| Variant | Included |
|---|---|
| With title | Yes |
| Without title | Yes |
When designing modal flows, account for the three ways users dismiss it:
- Close button - The icon button in the top-right corner.
- Escape - Pressing the Escape key.
- Outside click - Clicking the backdrop.
Toast
Toasts are pill-shaped notifications with a semantic status icon, a message, and a close button. They stack vertically and animate in and out.
| Color | Icon | Use for |
|---|---|---|
| Info | Info | Neutral information |
| Success | Circle check | Completed actions |
| Error | Circle x | Failures |
| Warning | Triangle alert | Situations needing caution |
Reserve persistent toasts (without auto-hide) for messages that require the user's acknowledgment. Transient confirmations should dismiss themselves.
Modal and Toast can be found in the Figma Template in the Components page.