Design System/Atoms/Alert

Alert

Inline message communicating status or feedback.

When To Use

  • Use Alert 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

  • Preserve table semantics for tabular data and avoid flattening structured information into generic divs.
  • Use clear headings, summaries, and labels so assistive technologies can announce the data in context.
  • Do not rely on color alone to communicate trend, status, or state in charts and metric cards.

Key Props / API

Variant props

variant

Key exports

Alert, AlertTitle, AlertDescription

Example Code

import { Alert, AlertTitle, AlertDescription } from "@hilum/ui"
import { Info, CheckCircle2, AlertTriangle, XCircle } from "lucide-react"

<Alert>
  <AlertTitle>Heads up</AlertTitle>
  <AlertDescription>You can add components to your app using the CLI.</AlertDescription>
</Alert>
<Alert variant="info">
  <Info size={15} />
  <AlertTitle>New update available</AlertTitle>
  <AlertDescription>Version 2.0 includes performance improvements.</AlertDescription>
</Alert>
<Alert variant="success">
  <CheckCircle2 size={15} />
  <AlertTitle>Payment successful</AlertTitle>
  <AlertDescription>Your subscription has been activated.</AlertDescription>
</Alert>
<Alert variant="warning">
// ...trimmed for docs

Alert

Variants

Default · Info · Success · Warning · Destructive