Callout
Enhanced alert component with 5 types (info, warning, error, success, note) for highlighting important information.
Live Demo
Information
This is an informational callout with helpful details.
Warning
Be careful! This action may have consequences.
Error
Something went wrong. Please try again.
Success
Your changes have been saved successfully!
Quick note without a title.
Installation
Usage
Props
| Name | Type | Default | Description |
|---|---|---|---|
type | 'info' | 'warning' | 'error' | 'success' | 'note' | 'info' | Type of callout - determines color and icon (info, warning, error, success, note) |
title | string | undefined | Optional title text to display |
icon | IconComponent | undefined | Custom icon to override the default |
className | string | undefined | Additional CSS classes to apply |
Use Cases
Documentation tips and notes
Important warnings in guides
Highlighted information blocks
Breaking changes in changelogs