Design System/Atoms/Callout

Callout

Prominent status or guidance panel with icon, actions, and semantic tone.

When To Use

Use Callout when information needs to be scanned quickly and compared across multiple rows, cards, or values.
Choose the example that best matches whether the user is browsing, monitoring, or drilling into structured data.
Lean on these patterns when you want consistent spacing and hierarchy before tuning the visual treatment.

When Not To Use

Do not use a dense data pattern when the primary task is storytelling, onboarding, or one-off explanation.
Do not flatten nuanced data into a compact summary card if the user still needs the underlying structure to make a decision.

Accessibility Notes

Maintain heading order and region labels so the surrounding layout stays understandable when styles are stripped away.
Avoid using visual grouping alone to explain hierarchy; expose the structure semantically as well.
Make sure drag, resize, and reorder interactions have keyboard alternatives when they are part of the core task.

Key Props / API

Props

title, description, icon, actions

Variant props

tone, compact

Example Code

import { Callout } from "@hilum/ui"
import { AlertTriangle, CheckCircle2, Info } from "lucide-react"

<Callout
  tone="info"
  icon={<Info aria-hidden="true" />}
  title="Review recommended"
  description="This workflow has unsaved changes in two sections."
/>
<Callout
  tone="success"
  icon={<CheckCircle2 aria-hidden="true" />}
  title="Import complete"
  description="148 records were added to the workspace."
/>
<Callout
  tone="warning"
  icon={<AlertTriangle aria-hidden="true" />}
// ...trimmed for docs

Tones

Semantic tones

Status, success, and warning panels with matching icon treatment.

Review recommended

This workflow has unsaved changes in two sections.

Import complete

148 records were added to the workspace.

Redirect required

The public URL changed. Create a redirect before publishing.

Actions

With actions

Use actions when the callout is recoverable or needs a decision.

Resolve duplicate slugs

Two products share the same public handle.