iconiq
—Open GitHub

Alert

Dismissible banners with your own leading icon, spring motion, and optional fixed positions. Built for system feedback that feels clear instead of heavy.

Open in

Installation

npx shadcn@latest add @iconiq/alert

Props

Alert

7 props

Default export for a single dismissible notice. It can render inline with surrounding content or portal to the viewport when you provide a position.
iconReactNode
Required
Leading visual passed straight into the icon slot. The wrapper applies fallback sizing to nested SVGs so Lucide icons land around 18px without extra setup.
titlestring
Required
Primary line rendered in the stronger label style.
messagestring
Required
Secondary copy rendered below the title with a lighter foreground tone.
dismissibleboolean
Defaulttrue
Controls whether the close button is rendered. Disabling it removes manual dismissal only; timeout still applies unless it is set to 0.
position"top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right"
When present, the component portals to document.body and uses fixed positioning classes. When omitted, the alert stays in normal flow and maxes out at max-w-sm.
timeoutnumber
Default10000
Auto-dismiss delay in milliseconds. Passing 0 disables the timer and removes the progress-bar countdown.
onDismiss() => void
Called after the component marks itself hidden, regardless of whether dismissal came from the close button or the timeout effect.

Notes

Every positioned alert snaps to a full-width top placement on small screens, then switches to the requested corner at the sm breakpoint.
The alert keeps its own visible state internally, so it is designed for fire-and-forget notifications rather than parent-controlled open state.