Callout
A versatile component for highlighting important information with various styles and customization options.
Overview
The Callout component is designed to draw attention to important information, warnings, tips, or notes. It supports different styles, custom icons, and can be used with both internal and external links.
Usage
Basic Usage
With Rich Content
<template>
<div>
<h1>My Component</h1>
<p>This is a paragraph.</p>
</div>
</template>
With Custom Icon and Internal Link
External Link
Variants
Props
URL or route path for navigation. Can be internal or external.
Target attribute for the link when using the to prop.
Custom icon to display in the callout.
Additional classes to apply to the callout.
Slots
The main content of the callout.
Optional title content.
Custom icon content, overrides the icon prop.
Variants
Yellow-themed callout for warning messages.
Green-themed callout for helpful tips.
Blue-themed callout for informational notes.
Red-themed callout for critical messages.
Best Practices
- Content Usage:
- Use appropriate variants for different message types
- Keep content concise and focused
- Include actionable information when possible
- Accessibility:
- Provide meaningful content that makes sense when read by screen readers
- Use appropriate color contrast for different variants
- Include descriptive text for icons
- Navigation:
- Use internal links for routing within your application
- Add
target="_blank"for external links - Consider adding visual indicators for external links
- Layout:
- Place callouts where they naturally fit the content flow
- Avoid overusing callouts to maintain their impact
- Group related callouts together when appropriate