Callout

Display important information with icons and variants for different message types.

Usage

The ProseCallout component is used to highlight important information, tips, warnings, and other contextual messages. It supports multiple variants, optional icons, and can even be turned into a clickable link.

Basic Example

This is a default callout with auto-generated icon.

This is a callout with a custom icon.

Variants

The callout component comes with several pre-styled variants, each with its own default icon and color scheme.

Info

This is an informational message. Use this variant for general information or helpful tips.

Did you know?

You can combine the variant with a title to make the callout more prominent and easier to scan.

Success

Operation completed successfully! Your changes have been saved.

Well done!

You've successfully completed all the required steps. You can now proceed to the next section.

Warning

Please review your changes carefully before proceeding. This action may have side effects.

Heads up!

Make sure to backup your data before running this command. It will modify files in your project.

Error

An error occurred while processing your request. Please try again later.

Something went wrong

The build failed due to syntax errors. Check the console output for more details.

Tip

Here's a helpful tip: You can use keyboard shortcuts to speed up your workflow.

Pro Tip

Press Cmd+K to open the command palette and quickly navigate to any file in your project.

Note

This is a general note. Use this variant for supplementary information.

Note

The API behavior may vary depending on your subscription plan. Check your plan details for more information.

Example

Here's a practical example of how to use this feature in your code.

Code Example

The following snippet demonstrates how to implement authentication in your application.

Filled Style

Use the filled prop to create a more prominent callout with solid background colors:

Filled Info

This is a filled info callout with solid colors.

Filled Success

This is a filled success callout with solid colors.

Filled Warning

This is a filled warning callout with solid colors.

Filled Error

This is a filled error callout with solid colors.

Custom Icons

Override the default icon for any variant:

Custom icon callouts let you match the icon to your specific use case.

Achievement Unlocked

You've earned a new badge! Keep up the great work.

Performance Tip

Enable caching to improve your application's load time by up to 70%.

With Title and Description

Getting Started

Follow these steps to set up your development environment and start building your application.

Breaking Change

Version 2.0 introduces breaking changes. Please review the migration guide before upgrading.

Clickable Callouts

Make callouts clickable by adding a url prop

Documentation

Click to view the complete documentation.

Learn More

Visit our website for tutorials and guides.

Complex Content

Callouts support rich content including lists, code, and formatting

Installation Steps

Follow these steps to install the package:

Install the package: npm install my-package
Import in your app: import { MyComponent } from 'my-package'
Use the component: <MyComponent />

Note: Make sure you have Node.js 18+ installed.

Best Practices

Here are some recommendations:

Keep your components small and focused
Write tests for critical functionality
Use TypeScript for better type safety
Document your code with JSDoc comments

For more details, check the style guide.

Props

Component Props

Prop	Type	Default	Description
`variant`	`"default" \| "info" \| "success" \| "warning" \| "error" \| "tip" \| "note" \| "example"`	`"default"`	Visual style variant
`filled`	`boolean`	`false`	Use filled/solid background style
`title`	`string`	-	Title text for the callout
`description`	`string`	-	Description text (can also use default slot)
`icon`	`string`	Auto	Icon name (auto-selected based on variant if not provided)
`url`	`string`	-	Make the callout clickable with this URL
`target`	`"_self" \| "_blank" \| "_parent" \| "_top"`	`"_self"`	Link target (use `_blank` for external links)
`class`	`string`	-	Additional CSS classes for wrapper
`titleClass`	`string`	-	Additional CSS classes for title
`descriptionClass`	`string`	-	Additional CSS classes for description
`iconClass`	`string`	-	Additional CSS classes for icon

Default Icons by Variant

Variant	Icon
`default`	`lucide:info`
`info`	`lucide:info`
`success`	`lucide:circle-check`
`warning`	`lucide:triangle-alert`
`error`	`lucide:circle-x`
`tip`	`lucide:lightbulb`
`note`	`lucide:sticky-note`
`example`	`lucide:code-2`

Slots

The component provides three slots for maximum flexibility:

Slot	Description
`default`	Main content area (overrides `description` prop)
`title`	Title content (overrides `title` prop)
`icon`	Icon content (overrides `icon` prop and variant icon)

Vue Component Usage

You can also use the Callout component in your Vue files:

All Variants

Default

This is a default callout.

Info

This is an info callout.

Success

This is a success callout.

Warning

This is a warning callout.

Error

This is an error callout.

Tip

This is a tip callout.

Note

This is a note callout.

Example

This is an example callout.

Filled Style

Filled Info

This uses the filled style.

Filled Success

This uses the filled style.

Filled Warning

This uses the filled style.

Filled Error

This uses the filled style.

With Slots

Custom Slotted Title

This callout uses slots for maximum flexibility.

Custom icon slot
Custom title slot
Custom content slot

Clickable Callout

Learn More

Click this callout to navigate to the documentation.

Custom Icons

Achievement Unlocked

You've earned a new badge!

Launch Ready

Your application is ready to deploy.

Performance Boost

Enable caching for better performance.

Styling

The component uses Tailwind Variants for styling. You can override any part using the class props:

<Callout
  variant="info"
  title="Custom Styles"
  class="rounded-xl shadow-lg"
  title-class="text-xl font-bold"
  description-class="text-base"
  icon-class="size-6"
>
  Fully customizable styling
</Callout>

Examples in Context

Documentation Page

Before You Begin

This guide assumes you have basic knowledge of Vue.js and TypeScript. If you're new to these technologies, we recommend reviewing the official documentation first.

Migration Guide

Breaking Changes in v2.0

The following breaking changes require updates to your code:

theme prop renamed to variant
color prop removed (use variant instead)
Default icon size changed from 20px to 24px

API Documentation

Rate Limiting

This endpoint is rate-limited to 100 requests per minute per API key. Exceeding this limit will result in a 429 error.

Tutorial

Quick Tip

You can use the keyboard shortcut Cmd + / to quickly toggle comments in your code editor.

Error Handling

Authentication Failed

Your session has expired. Please log in again to continue.

Tiptap Editor

Rich text editor blocks built with Tiptap featuring formatting toolbars, content editing, and grouped icon buttons. Perfect for blog posts, comments, documentation, and any content creation needs.

Card

Display content in elegant cards with animated border beam effects, perfect for features, navigation, and content highlights.