Callout

Callouts draw attention to important information in your documentation. They come in different styles to convey different types of messages, from helpful tips to critical warnings.

Basic Usage

Callout Types

Specra includes seven callout types, each with distinct styling:

Info

Note

Tip

Warning

Success

Error

Danger

Props

Prop	Type	Default	Description
type	string	"info"	Callout style: info, note, tip, warning, success, error, or danger
children	ReactNode	Required	The content inside the callout

Advanced Examples

Multi-Line Content

Callouts can contain any MDX content, including formatted text, lists, and code:

Nested Components

You can nest other components inside callouts:

GitHub-Style Alerts

Prefer Markdown syntax? Specra also supports GitHub-style alert syntax using blockquotes:

Supported alert types:

• [!NOTE] - Same as type="note"
• [!TIP] - Same as type="tip"
• [!IMPORTANT] - Same as type="warning"
• [!WARNING] - Same as type="warning"
• [!CAUTION] - Same as type="danger"

When to Use Each Type

Info - Additional context that enhances understanding

• "You can also achieve this using the CLI"
• "This feature is available in v2.0 and later"

Note - Important information that shouldn't be skipped

• "This setting affects all users in your organization"
• "Changes take effect after server restart"

Tip - Best practices and helpful suggestions

• "For better performance, enable caching"
• "Use TypeScript for better autocomplete"

Warning - Potential problems or breaking changes

• "This will modify your database schema"
• "Deprecated in v3.0, use newMethod() instead"

Success - Positive confirmations

• "Setup complete! Your site is ready"
• "All tests passed successfully"

Error - Critical issues to avoid

• "Do not expose your API key in client code"
• "This operation cannot be undone"

Danger - Destructive or irreversible actions

• "This will permanently delete all data"
• "Proceeding will revoke all access tokens"

Accessibility

Callouts are semantic and accessible:

• Uses appropriate ARIA roles
• Screen reader friendly
• Keyboard navigable
• Color contrast compliant (WCAG AA)
• Icons are decorative with proper alt text

Related Components