Introduction
Callouts are non-modal, inline messages that convey contextual information, positioned near the element they provide context for. Callouts appear within a task flow to update or notify users on the status of an action or task. Typically, they are positioned at the top or bottom of the related content area.
- Callouts serve two purposes: informative and cautionary.
- Callouts are displayed inline and can't be closed by the user.
Usage
Callouts are used to provide users with a non-disruptive feedback or the status of an action and remain until the action is resolved.
Provide information that impacts the current workflow.
Avoid using for primary critical warnings or system-level messages; use modals or alerts instead.
Provide all essential information and use a clear, concise copy.
Include all relevant information and refrain from including unnecessary details.
Utilise links to provide additional information within callouts, e.g. to link to order summary.
Avoid using links within callouts as buttons or for system-related actions.
Make sure to use short and concise wording for links inside a callouts.
Avoid using long text or wording for links inside callouts.
Use a callout to attract attention to the status of an action or workflow, e.g. to notify the user of unavailable items in their carts or availability information for products.
Avoid using callouts as a primary notification for time-sensitive information that requires immediate action, e.g. negative delivery updates or payment issues.
Also known as
Inline alert, inline notification, inline alert, hint