Prose
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
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 />
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
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:themeprop renamed tovariantcolorprop removed (usevariantinstead)- 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.
Prose Callout API
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
variant | any | "default" | No | The variant style of the callout |
target | "_self" | "_blank" | "_parent" | "_top" | "_self" | No | Link target (_blank for external links) |
title | string | — | No | The title of the callout |
description | string | — | No | The description/content of the callout |
icon | string | — | No | The icon to display |
url | string | — | No | Optional URL to make the callout clickable |
titleClass | ClassValue | — | No | Additional class for the title |
descriptionClass | ClassValue | — | No | Additional class for the description |
iconClass | ClassValue | — | No | Additional class for the icon |
filled | boolean | false | No | Whether to use filled style |