Messaging
This pattern outlines the different types of messaging components available in Cimpress UI and when each component should be used.
Messaging components
Section titled “Messaging components”Cimpress UI provides the following messaging components for different use cases and levels of urgency:
| Component | Purpose | Duration and interaction |
|---|---|---|
| Callout | Highlights useful, general, or contextual information inline, within the page flow. | Persists until dismissed or content is no longer relevant. |
| Toast | Quickly conveys non-disruptive feedback in response to a user action or background event. | Visible until dismissed or on a timer. |
| Alert | Communicates important system feedback (e.g., validation errors) inline, within the page flow. | Persists until resolved or dismissed. |
| Alert dialog | Interrupts the user’s workflow to present urgent information or require a critical decision. | Blocks interaction with the page; requires user action to close. |
| Modal dialog | Presents additional content or tasks in a focused overlay without leaving the current page. | Blocks interaction with the page; must be closed by the user. |
Callout
Section titled “Callout”Callouts are banners used to proactively highlight general, non-urgent information within the page flow. They can include actions, and they remain visible until dismissed or until the content is no longer relevant. Read more about callout.
Toasts are messages that provide non-disruptive feedback about a user’s action or a minor system event. They appear briefly at the top of the screen and auto-dismiss after a short period. Read more about toast.
Alerts are inline messaging banners that appear within the page content, often in response to system events or action validations. They are persistent until addressed or dismissed, and they do not contain actions. Read more about alert.
Alert dialog
Section titled “Alert dialog”Alert dialogs are the most disruptive messaging component, completely interrupting the user’s workflow. They are used for critical messages that necessitate user attention and action. Read more about alert dialog.
Modal dialog
Section titled “Modal dialog”Modal dialogs can be used to display additional content without navigating away from the page. It can be used to focus the user’s attention on a specific subtask. Read more about modal dialog.