Resources
Intro & Anatomy
Callouts are inline messages that provide contextual information to update or notify users about the status of actions or tasks. Use callouts for informative and cautionary messages that relate to the current workflow, e.g. availability notifications, status updates, or contextual guidance.
Callouts serve two primary purposes: informative messaging to provide helpful context, and cautionary alerts to highlight important considerations. They are displayed inline within content and cannot be dismissed by users, ensuring persistent visibility of important information.
Options & Styles
Content
Title is mandatory to clearly communicate the callout's main message.
Description is optional and appears only in large size callouts for additional context.
Link is optional and can direct users to related information or actions.
Icon is optional and should relate to the message content for visual context.
Sizes
MDX callouts come in two sizes:
Small includes mandatory title and optional link & icon
Large includes mandatory title, mandatory description, and optional link & icon
Variants
MDX offers multiple callout variants for different message types:
Transparent for subtle information without strong visual emphasis
Neutral for general informational content
Primary colour for brand-related or important information
Warning for cautionary messages requiring user attention
Error for highlighting problems or validation issues
Success for positive confirmations and completed actions
Best Practice & Usage
Callouts should provide relevant, contextual information that enhances the user's current workflow without overwhelming the interface. Use clear, concise messaging with appropriate visual hierarchy.
Provide information that impacts the current workflow and user decisions.
Avoid using for primary critical warnings or system-level messages; use modals or alerts instead.
Provide all essential information using clear, concise copy.
Include all relevant information and refrain from unnecessary details.
Utilise links to provide additional information within callouts, e.g. linking to order summaries.
Avoid using links within callouts as buttons or for system-related actions.
Use short and concise wording for links inside callouts.
Avoid using long text or wording for links inside callouts.
Use callouts to attract attention to action status or workflow information, e.g. notifying users of unavailable cart items.
Avoid using callouts as primary notifications for time-sensitive information requiring immediate action, e.g. delivery updates or payment issues.
Theming
You can customise colours, border width and radius, font styles, spacings and sizing to match your design requirements.
When not using MDX icons, a slot is available to use your own icon library or SVG icons within tooltip content.