Callout Component

The Callout component allows you to display single line callouts with different styles and icons for various types of information or alerts.

Examples

This is an informational callout with important details. Learn more

Important Warning

This is a success callout confirming a completed action. See results

This is a warning callout about potential issues. Read warnings

This is a danger callout warning about critical issues. View warnings

This is a tip callout with helpful information. Learn more

This is a note callout with additional information. View notes

Basic Usage

Import the Callout component in your Astro page or component:

---
import { Callout } from 'astro-nebula-ui';
---

Then use it to create callouts:

<Callout type="info">
  This is an informational callout.
</Callout>

Properties

The Callout component accepts the following properties:

Property	Type	Default	Description
`type`	`"info" \| "note" \| "danger" \| "success" \| "warning" \| "tip"`	`"info"`	The type of callout which determines the styling, icon, and color scheme
`title`	`string`	`undefined`	Optional title text displayed in the callout header alongside the icon

Callout Types

The component supports the following callout types:

info (default): For general information
note: For additional notes and details
danger: For critical issues or errors
success: For successful operations
warning: For cautionary information
tip: For helpful suggestions

Each type has its own icon and color scheme with modern gradient backgrounds:

<Callout type="info">Info callout</Callout>
<Callout type="note">Note callout</Callout>
<Callout type="danger">Danger callout</Callout>
<Callout type="success">Success callout</Callout>
<Callout type="warning">Warning callout</Callout>
<Callout type="tip">Tip callout</Callout>

Adding Titles

You can add an optional title to your callout:

<Callout type="warning" title="Important Warning">
  Make sure to follow the instructions carefully.
</Callout>

Including Links

You can add links within your callouts:

<Callout type="info">
  This is an informational callout with a <a href="/docs/guide">link to the guide</a>.
</Callout>

Markdown Support

When using callouts in MDX files, you can include markdown content inside:

<Callout type="warning" title="Important">
  **Make sure** to follow these instructions *carefully*.
</Callout>

Layout Behavior

The callout component automatically adjusts its layout based on whether a title is provided:

With title: Vertical layout with the icon and title in the header, content below
Without title: Horizontal layout with the icon on the left and content aligned to the right

This provides optimal visual hierarchy and space utilization for different use cases.

Dark Mode Support

The component automatically adapts to light and dark themes with appropriate color adjustments using CSS variables and media queries.

Example

Here’s a complete example showing different types of callouts on a page:

---
import { Callout } from 'astro-nebula-ui';
---

<div>
  <h2>API Documentation</h2>

  <Callout type="info" title="Rate Limits">
    API requests are limited to 100 per minute. <a href="/docs/api-limits">Learn more</a>
  </Callout>

  <h3>Authentication</h3>
  <p>...</p>

  <Callout type="warning">
    API keys should never be exposed in client-side code.
  </Callout>

  <h3>Error Handling</h3>
  <p>...</p>

  <Callout type="danger" title="Deprecation Notice">
    The endpoint will be deprecated on December 31st. <a href="/docs/migration">See migration guide</a>
  </Callout>
</div>