Callout

The Callout component highlights important information to draw the user’s attention within a page or section.

Examples

Note

Callout can have a toggle to collapse and can be dismissable.

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.

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.

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.

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.