Callout Component

Callout container for alerts and tips. Uses fixed font-size for visual prominence.

Notes

Prefer combined utilities like callout-solid-primary over separate callout-solid callout-primary — smaller CSS output.
Use data-role="title" and data-role="icon" for structured callout content with larger title/icon sizing.
Default font-size is 14px (0.875rem) — no responsive scaling to maintain visual prominence.

Basic usage

Default callout

Default warning callout.

With title

Note

A callout with title and additional description text.

Without icon

Text-only callout without icon.

Fixed nodes

data-role="title"

Tip

Text-only callout with title node.

Tip

Solid callout with title node.

Tip

Subtle callout with title node.

data-role="icon"

Callout with icon node.

Solid callout with icon node.

Subtle callout with icon node.

Both title + icon

Tip

Text-only callout with both icon and title.

Tip

Solid callout with both icon and title.

Tip

Subtle callout with both icon and title.

Only title + icon

Operation completed successfully.

Operation completed successfully.

Visual variants

Text (default)

No background or border. Colored text only.

Text variant — no background, no border.

Operation completed successfully.

Muted (callout-muted)

Light tint with 1px border.

Muted variant — light background with border.

Operation completed successfully.

Subtle (callout-subtle)

Borderless low-saturation tint.

Subtle variant — borderless, light background.

Operation completed successfully.

Solid (callout-solid)

High-saturation solid fill with white text.

Solid variant — saturated background, white text.

Operation completed successfully.

Sizes

Extra small: callout-2xs ~ callout-xs

2xs — 12px font, compact padding

xs — 12px font, standard padding

Small: callout-sm ~ callout-md

sm — 14px font (default)

md — 16px font

Medium: callout-lg ~ callout-xl

lg — 18px font, spacious padding

xl — 20px font, extra padding

Large: callout-2xl ~ callout-5xl

2xl — 22px font

3xl — 24px font

4xl — 26px font

5xl — 28px font

Theme colors (text/muted/subtle)

callout-primary

Primary callout.

callout-secondary

Secondary callout.

callout-tertiary

Tertiary callout.

callout-success

Success callout.

callout-error

Error callout.

callout-info

Info callout.

callout-warning

Warning callout.

callout-caution

Caution callout.

callout-highlight

Highlight callout.

callout-ink

Neutral ink callout.

callout-title

Title color callout.

callout-description

Description color callout.

callout-caption

Caption color callout.

callout-placeholder

Disabled callout.

Solid colors

Primary

Secondary

Tertiary

Success

Error

Info

Warning

Caution

Highlight

Ink

Title

Description

Caption

Disabled

Shortcut variants

callout-solid-* (standalone solid)

callout-solid-primary

callout-solid-success

callout-solid-error

callout-solid-highlight

callout-muted-* (standalone muted)

callout-muted-primary

callout-muted-success

callout-muted-error

callout-muted-highlight

callout-subtle-* (standalone subtle)

callout-subtle-primary

callout-subtle-success

callout-subtle-error

callout-subtle-highlight

Custom colors

Multiple color formats are supported:

1. Theme semantic colors, e.g. *-error, *-error-hover
2. Tailwind built-in colors, e.g. *-indigo-500
3. Raw color values, e.g. *-[#ff0000]
4. CSS named colors, e.g. *-[red], *-[green]

Text variant custom color

callout-green-200

callout-green-500

callout-[blue]

callout-[#acaa20]

Solid variant custom color

callout-solid callout-green-200

callout-solid callout-green-500

callout-solid callout-[blue]

callout-solid callout-[#acaa20]

Shortcut solid custom color

callout-solid-green-200

callout-solid-green-500

callout-solid-[blue]

callout-solid-[#acaa20]

Use cases

Form validation

Submit failed

Please check the following fields: username already exists, password too short.

Registration successful

Welcome! Your account has been created.

System notifications

System update

Scheduled maintenance tonight 02:00-04:00. Service may be temporarily unavailable.

Disk space low

Server disk usage at 92%. Please clean up.

Confirmation

Confirm deletion

Are you sure? This action cannot be undone.

Solid variant highlights

New feature

We've launched a new analytics dashboard. Check it out!

Backup complete

All data has been backed up to the cloud.