Callout

v0.4.0

Enhanced alert component with 5 types (info, warning, error, success, note) for highlighting important information.

Live Demo

Information

This is an informational callout with helpful details.

Warning

Be careful! This action may have consequences.

Error

Something went wrong. Please try again.

Success

Your changes have been saved successfully!

Quick note without a title.

Installation

npm install noorui-rtl

Usage

import { Callout } from 'noorui-rtl'

// With title
<Callout type="info" title="Did you know?">
  This is helpful information for users.
</Callout>

// Without title
<Callout type="warning">
  Be careful with this operation!
</Callout>

// Custom icon
<Callout type="success" icon={CustomIcon} title="Custom">
  Using a custom icon.
</Callout>

Props

Name	Type	Default	Description
`type`	`'info' \| 'warning' \| 'error' \| 'success' \| 'note'`	`'info'`	Type of callout - determines color and icon (info, warning, error, success, note)
`title`	`string`	`undefined`	Optional title text to display
`icon`	`LucideIcon`	`undefined`	Custom icon to override the default
`className`	`string`	`undefined`	Additional CSS classes to apply

Best Practices

Do

✓ Use the appropriate type (info, warning, error, success) to match the message severity
✓ Keep callout messages concise and actionable
✓ Include a clear title for complex or important callouts
✓ Use "note" type for supplementary, non-critical information
✓ Place callouts near relevant content they reference

Don't

✗ Don't overuse callouts - too many reduce their impact
✗ Don't use error type for warnings or info type for errors
✗ Don't put critical actions inside callouts without additional confirmation
✗ Don't use long paragraphs - keep messages scannable
✗ Don't use custom icons unless they clearly convey meaning