Callout

The Callout component displays important messages, notifications, and alerts with optional actions.

Overview

Callouts communicate important information to users through visually distinct messages. They combine color, iconography, and content to convey meaning and guide user attention.

When to Use

• Provide feedback after user actions
• Alert users to important information
• Guide users through complex workflows
• Highlight system status changes
• Offer contextual help or tips

Status Types

Default

Use for general informational messages that don't require immediate action.

When to use:

• Neutral announcements
• General updates
• Non-critical information

Info

Use for helpful tips, guidance, or supplementary information.

When to use:

• Onboarding tips
• Feature explanations
• Best practice suggestions
• Educational content

Positive

Use to confirm successful actions or positive outcomes.

When to use:

• Successful form submissions
• Completed transactions
• Achieved milestones
• Enabled features

Alert

Use for warnings that require user attention but aren't critical.

When to use:

• Potential issues that need review
• Actions that may have consequences
• Approaching limits or deadlines
• Recommended but not required actions

Negative

Use for errors, failures, or critical issues requiring immediate attention.

When to use:

• Failed operations
• Validation errors
• System errors
• Blocked actions
• Critical warnings

Pending

Use to indicate ongoing processes or loading states.

When to use:

• Processing transactions
• Loading data
• Waiting for external responses
• Background operations in progress

Tooltip

Use for contextual help that appears near related UI elements.

When to use:

• Inline help text
• Field explanations
• Feature descriptions
• Contextual guidance

Variants

Default

Full background color with border - use for prominent messages that need high visibility.

Minimal

Subtle styling with minimal background - use for less critical messages or when reducing visual weight.

Layouts

Stacked

Title, description, and actions arranged vertically - use when content is longer or actions need emphasis.

Inline

Content and actions arranged horizontally - use when space is limited or for compact messages.

Best Practices

Do:

• Use clear, concise language
• Match status to message urgency
• Provide actionable next steps when appropriate
• Place callouts near related content
• Allow users to dismiss non-critical messages

Don't:

• Overuse callouts - they lose impact
• Use multiple callouts of the same status on one page
• Use negative status for non-critical issues
• Hide critical information in dismissible callouts
• Use vague or technical error messages