NeoCallout Examples

NeoCallout Component Examples

The NewCallout component is an enhanced version of the basic callout with additional features like collapsible content, multiple variants, custom titles, and improved Starlight theme integration.

Installation & Usage

Import the Component

---
import { NeoCallout } from 'astro-nebula-ui'
---

Basic Syntax

<NeoCallout type="info">
  Your content here
</NeoCallout>

Component Properties

Property	Type	Default	Required	Description
type	"info" | "note" | "danger" | "success" | "warning" | "tip" | "quote"	"info"	No	Sets the callout type which determines the icon and color scheme
title	string	undefined	No	Optional title displayed in the header. If not provided, only the icon is shown
icon	string	undefined	No	Custom SVG icon as a string. Overrides the default type-based icon
variant	"default" | "minimal" | "filled" | "outline"	"default"	No	Visual variant that controls the overall appearance and styling
collapsible	boolean	false	No	Makes the callout expandable/collapsible with a toggle button
expanded	boolean	true	No	Initial expanded state. Only applies when collapsible is true

With Title

<NeoCallout type="warning" title="Important Notice">
  Your content here
</NeoCallout>

With Variant

<NeoCallout type="success" variant="filled" title="Success!">
  Your content here
</NeoCallout>

Collapsible Example

<NeoCallout
  type="info"
  title="Click to expand"
  collapsible={true}
  expanded={false}
>
  This content is hidden by default
</NeoCallout>

Complete Properties Example

<NeoCallout
  type="warning"
  title="Advanced Configuration Settings"
  variant="filled"
  collapsible={true}
  expanded={false}
  icon="<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z'/></svg>"
>
  This example demonstrates all available NeoCallout properties:

  - **type**: "warning" (orange color scheme with warning styling)
  - **title**: "Advanced Configuration Settings" (custom header text)
  - **variant**: "filled" (bold background variant for maximum visibility)
  - **collapsible**: true (allows expanding/collapsing content)
  - **expanded**: false (content starts collapsed by default)
  - **icon**: Custom triangle warning SVG (overrides default warning icon)

  You can combine any or all of these properties to create the perfect callout for your content needs.
</NeoCallout>

Type Details

• info: Blue color scheme with info icon
• note: Purple color scheme with note icon
• danger: Red color scheme with warning triangle icon
• success: Green color scheme with checkmark icon
• warning: Orange color scheme with warning triangle icon
• tip: Teal color scheme with lightbulb-style icon
• quote: Gray color scheme with quote marks icon

Variant Details

• default: Gradient background with left accent border and shadow
• minimal: Clean design with just a left border, no background
• filled: Bold design with full accent color background
• outline: Outlined design with border but no background fill

Basic Usage

Default Callouts

This is an info callout with some content. It supports links and inline code.

This is a note callout. Perfect for additional information that readers should be aware of.

This is a success callout. Great for highlighting positive outcomes or completed tasks.

This is a warning callout. Use it to alert users about potential issues or important considerations.

This is a danger callout. Reserve this for critical information or serious warnings.

This is a tip callout. Perfect for sharing helpful advice or best practices.

This is a quote callout. Use it for important quotes, testimonials, or highlighted text.

With Custom Titles

Quick Start Guide

Adding a custom title makes your callouts more descriptive and easier to scan.

Important Note

This feature requires Node.js version 18 or higher for optimal performance.

Installation Complete

Your package has been successfully installed and is ready to use!

Breaking Changes in v2.0

Please review the migration guide before upgrading to avoid compatibility issues.

Security Alert

This action will permanently delete all your data. This cannot be undone.

Performance Optimization

Use lazy loading for images to improve your page’s initial load time.

Customer Feedback

“This component library has transformed our development workflow and improved our design consistency.” - Development Team Lead

Variants

Default Variant

The default variant provides a subtle background with accent border:

Default Variant

This is the standard callout appearance with gradient background and left accent border.

Minimal Variant

A clean, minimal design with just a left border:

Information

Clean minimal design for informational content.

Important Note

Minimal styling for notes and observations.

Success Message

Clean and minimal design that doesn’t distract from your content.

Caution

Subtle warning with minimal visual impact.

Critical Issue

Minimal styling even for critical information.

Helpful Tip

Clean minimal design for tips and suggestions.

Notable Quote

Minimal styling for quotes and testimonials.

Filled Variant

Bold and attention-grabbing with full accent color background:

Important Information

Bold filled design for information that demands attention.

Key Point

High-contrast styling for important notes and observations.

Congratulations!

Bold success messaging with full accent background.

Important Warning

High-visibility warning that stands out from content.

Critical Alert

High-contrast variant perfect for critical information that needs immediate attention.

Pro Tip

Bold styling for tips that deserve special attention.

Featured Quote

Eye-catching filled variant for important quotes and testimonials.

Outline Variant

Outlined design with no background fill:

Information

Clean outlined design for informational content without background distraction.

Note

Outlined styling for notes that blend seamlessly with content.

Success

Subtle outline variant for success messages that don’t overpower content.

Warning

Clean warning outline that maintains readability on any background.

Danger

Outlined critical information that remains visible without being overwhelming.

Pro Tip

Clean outline variant that integrates well with any background.

Quote

Elegant outlined design for quotes that complement any layout.

Collapsible Callouts

Expanded by Default

Click to collapse this section

This callout starts expanded but can be collapsed by clicking the header. Perfect for optional reading material or detailed explanations that might clutter the main content.

You can include:

• Lists and bullet points
• Bold text and italic text
• External links
• Code snippets and blocks
• Multiple paragraphs with detailed explanations

Collapsed by Default

Advanced Configuration (Click to expand)

This content is hidden by default. Users can choose to expand it when they need more detailed information.

// Example configuration
const config = {
  theme: 'auto',
  variant: 'default',
  collapsible: true
};

Mixed Content Examples

Documentation Section

About This Section

This section demonstrates how callouts can contain rich content including code blocks, lists, and formatted text.

Code Example

---
// Component usage
---
<NeoCallout type="success" title="Success!">
  Your operation completed successfully.
</NeoCallout>

Features List

• ✅ Starlight theme integration
• ✅ Multiple variants (default, minimal, filled, outline)
• ✅ Collapsible content with smooth animations
• ✅ Custom titles and icons
• ✅ Accessibility support (ARIA attributes)
• ✅ Responsive design

API Reference

Component Props

Prop	Type	Default	Description
type	string	"info"	Callout type: info, note, danger, success, warning, tip, quote
title	string	undefined	Optional title displayed in the header
icon	string	undefined	Custom SVG icon (overrides default type icon)
variant	string	"default"	Visual variant: default, minimal, filled, outline
collapsible	boolean	false	Whether the callout can be collapsed
expanded	boolean	true	Initial expanded state (only applies if collapsible)

Complete Property Examples

This section demonstrates all available properties and their combinations to give you a comprehensive understanding of the NeoCallout component’s capabilities.

All Properties Showcase

Basic Properties (type, title, variant)

<!-- Info type with all variants -->
<NeoCallout type="info" title="Default Info" variant="default">
  Information callout with default styling and gradient background.
</NeoCallout>

<NeoCallout type="info" title="Minimal Info" variant="minimal">
  Information callout with minimal styling - just a left border.
</NeoCallout>

<NeoCallout type="info" title="Filled Info" variant="filled">
  Information callout with bold filled background for maximum attention.
</NeoCallout>

<NeoCallout type="info" title="Outline Info" variant="outline">
  Information callout with clean outline design and no background.
</NeoCallout>

Default Info

Information callout with default styling and gradient background.

Minimal Info

Information callout with minimal styling - just a left border.

Filled Info

Information callout with bold filled background for maximum attention.

Outline Info

Information callout with clean outline design and no background.

Collapsible Properties (collapsible, expanded)

<!-- Collapsible expanded by default -->
<NeoCallout
  type="note"
  title="Collapsible Expanded (Default)"
  variant="default"
  collapsible={true}
  expanded={true}
>
  This callout starts expanded and can be collapsed by clicking the header.
</NeoCallout>

<!-- Collapsible collapsed by default -->
<NeoCallout
  type="warning"
  title="Collapsible Collapsed (Click to expand)"
  variant="filled"
  collapsible={true}
  expanded={false}
>
  This content is hidden by default and reveals when clicked.
</NeoCallout>

Collapsible Expanded (Default)

This callout starts expanded and can be collapsed by clicking the header. You can include any content here including lists, code blocks, and formatted text.

Collapsible Collapsed (Click to expand)

This content is hidden by default and reveals when clicked. Perfect for optional details or advanced configuration that doesn’t clutter the main content.

Custom Icon Property

<!-- Custom SVG icon override -->
<NeoCallout
  type="success"
  title="Custom Icon Example"
  variant="outline"
  icon="<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'/></svg>"
>
  This callout uses a custom star icon instead of the default success checkmark.
</NeoCallout>

Custom Icon Example

This callout uses a custom star icon instead of the default success checkmark.

Maximum Property Combination

Here’s an example using all properties together:

<NeoCallout
  type="tip"
  title="Complete Property Example"
  variant="filled"
  collapsible={true}
  expanded={false}
  icon="<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z'/></svg>"
>
  This example demonstrates all available properties:
  - **Type**: tip (teal color scheme)
  - **Title**: Custom descriptive title
  - **Variant**: filled (bold background)
  - **Collapsible**: true (can be expanded/collapsed)
  - **Expanded**: false (starts collapsed)
  - **Icon**: Custom lightbulb SVG icon

  You can include any content here including code blocks, lists, and rich formatting.
</NeoCallout>

Complete Property Example

This example demonstrates all available properties:

• Type: tip (teal color scheme)
• Title: Custom descriptive title
• Variant: filled (bold background)
• Collapsible: true (can be expanded/collapsed)
• Expanded: false (starts collapsed)
• Icon: Custom lightbulb SVG icon

You can include any content here including code blocks, lists, and rich formatting.

Real-World Scenarios

Documentation Warning with Custom Icon

<NeoCallout
  type="danger"
  title="Breaking Changes in v3.0"
  variant="filled"
  collapsible={true}
  expanded={true}
  icon="<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z'/><line x1='12' y1='9' x2='12' y2='13'/><line x1='12' y1='17.02' x2='12.01' y2='17'/></svg>"
>
  Review these breaking changes before upgrading...
</NeoCallout>

Breaking Changes in v3.0

Review these breaking changes before upgrading:

• API endpoint changes require URL updates
• Authentication method has been updated
• Configuration file format has changed
• Legacy browser support has been dropped

Minimal Configuration Note

<NeoCallout
  type="note"
  title="Optional: Advanced Configuration"
  variant="minimal"
  collapsible={true}
  expanded={false}
>
  These settings are optional for most users...
</NeoCallout>

Optional: Advanced Configuration

These settings are optional for most users but provide additional customization:

const config = {
  advanced: true,
  caching: 'aggressive',
  optimization: 'max'
};

Best Practices

Usage Guidelines

• Use info callouts for supplementary information
• Reserve danger callouts for critical warnings only
• Keep callout content concise and focused
• Use collapsible callouts for optional or detailed content
• Choose variants that match your design system

Accessibility Considerations

• Always provide meaningful titles for collapsible callouts
• Ensure sufficient color contrast in custom themes
• Test keyboard navigation with collapsible content
• Use semantic HTML structure within callout content

Integration with Starlight

Automatic Theme Integration

The NewCallout component automatically integrates with Starlight’s theme system, adapting to light and dark modes seamlessly. All colors are derived from Starlight’s CSS custom properties with sensible fallbacks for standalone use.