Callout

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

Status Types

Default - Neutral informational message

Alert - Warning or caution message requiring attention

Positive - Success or confirmation message

Negative - Error or critical issue message

Info - Helpful information or tips

Pending - Loading or processing state

Tooltip - Contextual help with dark background

Variants

Default - Full background color with border

Minimal - Subtle styling with minimal background

Layouts

Stacked - Title, description, and actions arranged vertically

Inline - Content and actions arranged horizontally

Features

• Status-specific icons and colors
• Optional title and description
• Primary and secondary action buttons
• Dismissible with close button
• Optional badge for additional context
• Optional image support
• Fade in/out animations
• Arrow pointer for tooltip positioning

When to Use

• Use alert status for warnings that need user attention
• Use positive status for success confirmations
• Use negative status for errors or critical issues
• Use info status for helpful tips and guidance
• Use pending status during loading or processing
• Use tooltip variant for contextual help
• Use inline layout when space is limited
• Include actions when user response is needed