Callout

Feedback

Content

Inline content highlighting for documentation, articles, and educational content. Use for tips, notes, warnings, and important information.

Preview

Interactive callout examples

Tip

Pro tip: Use keyboard shortcuts for faster navigation. Press Cmd+K to open the command palette.

Warning

This feature is deprecated and will be removed in version 2.0. Please migrate to the new API.

Important

Make sure to backup your data before proceeding. This action cannot be undone.

Variants

All available callout styles

Note

This is a default note with general information.

Info

Additional context or background information that helps understand the topic.

Tip

A helpful suggestion or best practice to improve your workflow.

Note

A note about something worth remembering or paying attention to.

Warning

A warning about potential issues or things to be careful about.

Danger

Critical information about destructive actions or security concerns.

Important

Highlighted information that requires immediate attention.

Custom Title

Callouts with custom titles

Performance Tip

Use memoization for expensive calculations to improve render performance.

Deprecation Notice

The legacyMode prop will be removed in the next major version.

Did you know?

You can customize the border color by using the className prop.

Minimal

Simplified callouts without title or icon

A simple info callout without a title.

Tip

A tip callout without an icon, but with the title.

A minimal warning callout with just the content.

With Code

Callouts containing code snippets

Quick Start

Install the package with npm install @eidetic/ui or pnpm add @eidetic/ui.

Breaking Change

The onChange callback signature has changed from (value: string) => void to (event: ChangeEvent) => void.

Props

Callout component API reference

Prop	Type	Default	Description
`variant`	`'default' \| 'info' \| 'tip' \| 'warning' \| 'danger' \| 'note' \| 'important'`	`'default'`	Visual style variant for the callout
`title`	`string`	`Based on variant`	Title of the callout (defaults based on variant)
`icon`	`React.ComponentType`	—	Custom icon component to override the default variant icon
`hideIcon`	`boolean`	`false`	Hide the icon
`hideTitle`	`boolean`	`false`	Hide the title
`className`	`string`	—	Additional CSS classes for custom styling

Usage

Import and implementation example

import { Callout } from '@/components/ui/callout'

export default function Example() {
  return (
    <Callout variant="tip" title="Pro Tip">
      Use keyboard shortcuts to navigate faster.
    </Callout>
  )
}

Features

Built-in functionality

7 variants: Default, info, tip, warning, danger, note, and important styles
Left border accent: Distinctive left border for visual hierarchy
Semantic icons: Automatic icon selection based on variant
Code styling: Built-in styling for inline code elements
Customizable: Override title, icon, or hide elements as needed
Dark mode: Full dark mode support with proper color contrast

Accessibility

ARIA support and keyboard navigation

ARIA Attributes

role="note"aria-hidden="true" on decorative icons

Notes

Uses semantic HTML structure for screen reader compatibility
Color is not the only indicator of meaning - icons and text provide context
Sufficient color contrast in both light and dark modes
Code elements have visible styling for sighted users

Related Components

Alert Banner Toast Card