Callout

Overview

The Callout component displays highlighted blocks of important information with semantic color variants and optional icons. Ideal for tips, warnings, errors, and informational notes.

Import

import { Callout } from "@aurelienbbn/gadget-ui/components";

Basic Usage

<Callout>
  This is an informational callout.
</Callout>

Variants

The Callout component supports four semantic variants, each with a unique icon:

Info
Warning
Danger
Tip

<Callout variant="info">
  Informational content goes here.
</Callout>

Blue accent styling with info icon (ℹ). This is the default variant.

<Callout variant="warning">
  Warning message goes here.
</Callout>

Yellow/orange styling with warning icon (⚠).

<Callout variant="danger">
  Error or danger message goes here.
</Callout>

Red styling with error icon (✕).

<Callout variant="tip">
  Helpful tip or success message goes here.
</Callout>

Green styling with tip icon (✦).

Props

'info' | 'warning' | 'danger' | 'tip'

default:"info"

The semantic variant of the callout.

string

Optional title displayed above the content in semibold text.

ReactNode

required

The content of the callout.

string

Additional CSS classes to apply.

The Callout component extends HTMLAttributes<HTMLDivElement>, so all standard div attributes are supported.

Design Details

Flex layout with 12px gap between icon and content
Rounded corners with border
14px (sm) text size
Icon sized at 16px (base) with matching variant color
Icon has aria-hidden="true" for accessibility
Uses role="note" for semantic HTML

Examples

With Title

<Callout variant="warning" title="Important Note">
  Make sure to save your changes before navigating away.
</Callout>

Info Callout

<Callout variant="info">
  You can customize the appearance using the className prop.
</Callout>

Danger Callout

<Callout variant="danger" title="Error">
  Failed to load data. Please try again later.
</Callout>

Tip Callout

<Callout variant="tip" title="Pro Tip">
  Use keyboard shortcuts to navigate faster through the interface.
</Callout>

With Formatted Content

<Callout variant="info">
  <p>This callout supports rich content.</p>
  <ul>
    <li>First item</li>
    <li>Second item</li>
  </ul>
</Callout>

The content area has [&_p]:m-0 to remove default paragraph margins.

Accessibility

Icon is hidden from screen readers with aria-hidden="true"
Semantic role="note" attribute
Color is not the only indicator (icons provide additional context)

Component Definition

Location: packages/gadget-ui/src/components/callout.tsx:39

Components

Utilities

Overview

Import

Basic Usage

Variants

Props

Design Details

Examples

With Title

Info Callout

Danger Callout

Tip Callout

With Formatted Content

Accessibility

Component Definition

​Overview

​Import

​Basic Usage

​Variants

​Props

​Design Details

​Examples

​With Title

​Info Callout

​Danger Callout

​Tip Callout

​With Formatted Content

​Accessibility

​Component Definition

Overview

Import

Basic Usage

Variants

Props

Design Details

Examples

With Title

Info Callout

Danger Callout

Tip Callout

With Formatted Content

Accessibility

Component Definition