Configuration

---

The Callout component is designed to highlight important information, warnings, errors, or successes in your application. It is a versatile alert box with customizable variants and titles.

Props

variant

Type: string

Default: “info”

Options: "info" | "warning" | "danger" | "success"

Description: Defines the type of alert to display. The variant determines the color, icon, and default title of the alert.

title

Type: string

Default: Default titles based on the variant

Description: Custom title for the alert. If not provided, the default title for the specified variant will be used.

icon

Type: LucideIcon (optional)

Default: Default icon based on the variant

Description: A custom icon to use in the alert. If not provided, the default icon for the specified variant will be used. You can look for icons at lucide.dev.

Basic Usage

To use the Callout component, import it and use it in your Astro files with the desired variant and title.