Callout

Callout

<Callout tone="warning" title="Heads up">
  This change cannot be undone.
</Callout>

Install: @helixui/core

import { Callout } from '@helixui/core'

status: stable · since: 0.1.0

Tags: inline-alert, note, tip, in-content

Live playground

Open the full editor or source on GitHub.

Anatomy

┌─[i]── Heading ─────────────────────────────┐
│   Body copy explaining the situation.       │
└────────────────────────────────────────────┘

Layout

• display — block
• width — fill
• height — content
• intrinsicSize — inline within a content column
• stackable — true
• fullBleed — false

Visual

A rounded surface (radius.md) with a tone-tinted background, leading icon, optional title, and body. Subtler than Banner — designed to live inside content, not float at page top.

Props

Name	Type	Default	Description
tone	'info' | 'success' | 'warning' | 'danger' | 'neutral'	info	Color intent.
title	ReactNode	—	Bold headline above the body.
icon	ReactNode	—	Optional leading icon. Provided by the caller; helixui has no icon set.

Slots

• children — the body content

Tokens used

color.bg.action.brand.subtle, color.bg.action.success.subtle, color.bg.action.warning.subtle, color.bg.action.danger.subtle, color.bg.surface.subtle, color.text.action.brand, color.text.action.success, color.text.action.warning, color.text.action.danger, color.text.primary, color.border.default, radius.md, space.1, space.3, space.4, font.size.sm, font.weight.semibold, font.lineHeight.normal

Accessibility

Role: status

Notes

• For non-critical updates the default role="status" is appropriate. For critical errors that must interrupt the user, use a Toast or Dialog instead.
• Do not use color alone to convey meaning; the leading icon and title text should make the tone unambiguous.

Composes with

Component	Relation	Note
Banner	alternative	Banner for page-level; Callout for in-content.
Stack	parent	Often inside a Stack of body content.
Toast	sibling

Prompt examples

These are the AI prompt → JSX mappings used by the helixui prompt DSL and integrations like Cursor / Claude Code.

in-content tip

“a blue info callout about API limits”

<Callout tone="info" title="Heads up">Rate limit is 100 req/min.</Callout>

inline error

“red error callout in a settings page”

<Callout tone="danger">Couldn't save changes — please retry.</Callout>

Related

• Toast