Callout
Examples
Anatomy
Note
Callout can have a toggle to collapse and can be dismissable.
How to use
When to use
- Important Alerts: Use Callouts to display critical alerts or warnings that users need to see immediately.
- Key Information: Highlight essential details, such as updates, tips, or featured content.
- Instructions and Notices: Provide users with important instructions or notices that are relevant to their current task or context.
When not to use
- Overuse: Avoid using Callouts excessively on a single page, as this can dilute their effectiveness.
- Primary Content: Do not use Callouts for primary content; they are meant for supplementary information.
- Non-Essential Information: Refrain from using Callouts for information that does not require immediate attention or action from the user.
Alternatives:
- Tooltips: For brief, contextual information that appears on hover or focus.
- Modals: For information that requires user interaction or must be acknowledged before proceeding.
- Inline Notifications: For non-critical messages that should still be noticeable within the content flow.
Accessibility
- ARIA Roles and Properties: Use appropriate ARIA roles (e.g.,
role="alert") to ensure screen readers announce the Callout content properly. - Keyboard Focus: Ensure that Callouts can be navigated to and interacted with using a keyboard.
- Contrast and Readability: Maintain high contrast between Callout text and its background to ensure readability.
- Visible Focus Indicators: Provide clear focus indicators for any interactive elements within the Callout.
- Screen Reader Announcements: Use ARIA live regions (e.g.,
aria-live="assertive") for Callouts that need to be announced immediately to users relying on screen readers.