Alert
A React component in Beamline's Feedback category, in the free sample.
A message that stays until it is dealt with: what happened, what to do, an action; danger and warning are announced; dismissing folds its height away.
Use it for
- Persistent problems or notices on a page: failing webhook, expiring card, maintenance.
Not for
- Brief results of an action (toast).
- Field errors (under the field).
Anatomy
- wrap (folds on dismiss)
- alert (m-surface; tone tint composed over the role's fill)
- icon (tone colour)
- title
- body
- actions
- dismiss (ghost icon Button sm)
States
- shown
- folding away
Keyboard
- Dismiss is a button
Motion
Dismiss folds the height to zero and fades over --pui-duration-standard, then unmounts; reduced motion is instant. Nothing moves at rest.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
tone | "info" | "success" | "warning" | "danger" | "neutral" | — | |
title / children / action | ReactNode | — | |
icon | ReactNode | false | — | |
open / onDismiss | boolean / () => void | — | |
style / ref | CSSProperties / native Ref | — | native HTMLDivElement |
classNames | AlertClassNames | — |
Dependencies
lucide-react
Import
import { Alert } from "@/components/alert/alert";Get it
Alert is part of Beamline: 190 React components and screens your coding agent (Claude Code, Codex, Cursor or any MCP client) installs into your app through Beamline's MCP server, as a ready-built package or as plain React source you can change. $49 one payment (regular $200), no subscription, a year of updates, one licence for your whole team. Alert is in the free sample, which costs nothing. Get Beamline · Connect your agent
More in Feedback
- Announcement bar: A banner across the top for news and offers: messages take turns, a countdown ticks, and dismissing folds it away and can remember it.
- Empty state: What a place will hold and the first step to fill it, instead of a blank; a compact size for panels and filtered tables.
- Notification centre: Updates that wait to be read: a bell with the unread count opens All / Unread, new and earlier groups, and per item mark read or dismiss.
- Progress: How much of a known task is done, or a moving bar when the length is unknown, with an optional label and value.
- Skeleton: Holds the shape of content while it loads, then crossfades into it, so nothing jumps.
- Spinner: A ring that spins while work runs and closes into a drawn check or cross when it ends.
- Usage meter: An allowance and what fills it: one bar split by source, the room left, a warning near the limit and the overflow in its own red well past a notch at the…