Components

Callout

A highlighted message component for important information, warnings, or tips.View source →

This component's API and documentation are under review and may change. Use with caution in production.

Callout draws attention to important information with a visually distinct container. Use it for tips, warnings, errors, and other messages that need to stand out from regular content.

This is an enhanced version of the Callout from Radix Themes.

Playground

This is an informational callout message.

Installation

shell

npm install @kushagradhawan/kookie-ui

Usage

tsx

import { Callout } from '@kushagradhawan/kookie-ui';
import { HugeiconsIcon } from '@hugeicons/react';
import { InformationCircleIcon } from '@hugeicons/core-free-icons';
 
export function MyCallout() {
  return (
    <Callout.Root>
      <Callout.Icon>
        <HugeiconsIcon icon={InformationCircleIcon} strokeWidth={1.75} />
      </Callout.Icon>
      <Callout.Text>
        This is an informational callout message.
      </Callout.Text>
    </Callout.Root>
  );
}

Anatomy

The Callout component is composed of three parts:

Callout.Root - The container that holds the icon and text
Callout.Icon - Optional icon slot for visual emphasis
Callout.Text - The message content

Props

Callout.Root

Prop	Type	Default	Description
`size`	`'1' \| '2' \| '3'`	`'2'`	Controls the size. Supports responsive values.
`variant`	`'soft' \| 'surface' \| 'outline' \| 'classic'`	`'soft'`	The visual style of the callout.
`color`	`AccentColor`	-	The accent color. Uses theme accent if not specified.
`highContrast`	`boolean`	`false`	Increases color contrast.
`material`	`'solid' \| 'translucent'`	-	Material appearance.
`live`	`'off' \| 'polite' \| 'assertive'`	`'polite'`	ARIA live region behavior.
`role`	`'alert' \| 'status' \| 'note'`	`'status'`	ARIA role for accessibility.
`asChild`	`boolean`	`false`	Merge props onto the child element.

Variants

Soft

The default variant with a subtle tinted background.

tsx

<Callout.Root variant="soft" color="blue">
  <Callout.Icon>
    <HugeiconsIcon icon={InformationCircleIcon} strokeWidth={1.75} />
  </Callout.Icon>
  <Callout.Text>Soft variant with subtle background.</Callout.Text>
</Callout.Root>

Surface

Elevated appearance with a light background.

tsx

<Callout.Root variant="surface" color="blue">
  <Callout.Icon>
    <HugeiconsIcon icon={InformationCircleIcon} strokeWidth={1.75} />
  </Callout.Icon>
  <Callout.Text>Surface variant with elevation.</Callout.Text>
</Callout.Root>

Outline

Bordered with transparent background.

tsx

<Callout.Root variant="outline" color="blue">
  <Callout.Icon>
    <HugeiconsIcon icon={InformationCircleIcon} strokeWidth={1.75} />
  </Callout.Icon>
  <Callout.Text>Outline variant with visible border.</Callout.Text>
</Callout.Root>

Classic

A refined, subtle appearance.

tsx

<Callout.Root variant="classic" color="blue">
  <Callout.Icon>
    <HugeiconsIcon icon={InformationCircleIcon} strokeWidth={1.75} />
  </Callout.Icon>
  <Callout.Text>Classic variant with refined styling.</Callout.Text>
</Callout.Root>

Semantic Colors

Use colors to convey meaning.

tsx

// Information
<Callout.Root color="blue">
  <Callout.Icon>
    <HugeiconsIcon icon={InformationCircleIcon} strokeWidth={1.75} />
  </Callout.Icon>
  <Callout.Text>Helpful information for the user.</Callout.Text>
</Callout.Root>
 
// Success
<Callout.Root color="green">
  <Callout.Icon>
    <HugeiconsIcon icon={CheckmarkCircle02Icon} strokeWidth={1.75} />
  </Callout.Icon>
  <Callout.Text>Operation completed successfully.</Callout.Text>
</Callout.Root>
 
// Warning
<Callout.Root color="amber">
  <Callout.Icon>
    <HugeiconsIcon icon={Alert02Icon} strokeWidth={1.75} />
  </Callout.Icon>
  <Callout.Text>Please review before continuing.</Callout.Text>
</Callout.Root>
 
// Error
<Callout.Root color="red">
  <Callout.Icon>
    <HugeiconsIcon icon={Cancel01Icon} strokeWidth={1.75} />
  </Callout.Icon>
  <Callout.Text>An error occurred. Please try again.</Callout.Text>
</Callout.Root>

Sizes

Control callout size with the size prop.

tsx

<Callout.Root size="1" color="blue">
  <Callout.Icon>
    <HugeiconsIcon icon={InformationCircleIcon} strokeWidth={1.75} />
  </Callout.Icon>
  <Callout.Text>Size 1 - Compact</Callout.Text>
</Callout.Root>
 
<Callout.Root size="2" color="blue">
  <Callout.Icon>
    <HugeiconsIcon icon={InformationCircleIcon} strokeWidth={1.75} />
  </Callout.Icon>
  <Callout.Text>Size 2 - Default</Callout.Text>
</Callout.Root>
 
<Callout.Root size="3" color="blue">
  <Callout.Icon>
    <HugeiconsIcon icon={InformationCircleIcon} strokeWidth={1.75} />
  </Callout.Icon>
  <Callout.Text>Size 3 - Large</Callout.Text>
</Callout.Root>

Without Icon

The icon is optional. Use text-only callouts for simpler messages.

tsx

<Callout.Root color="gray">
  <Callout.Text>
    A simple callout without an icon.
  </Callout.Text>
</Callout.Root>

Accessibility

Callouts use ARIA live regions by default (aria-live="polite"). For urgent messages, use live="assertive". For decorative callouts, use live="off".

tsx

// Urgent error message
<Callout.Root color="red" live="assertive" role="alert">
  <Callout.Icon>
    <HugeiconsIcon icon={Cancel01Icon} strokeWidth={1.75} />
  </Callout.Icon>
  <Callout.Text>Session expired. Please log in again.</Callout.Text>
</Callout.Root>