Alert

3 studies past their SLA

Oldest has been unreported for 4 hours.

import { AlertTriangleIcon } from 'lucide-react'import { Alert, AlertDescription, AlertTitle } from '@/registry/qure/ui/alert'export default function AlertDemo() {  return (    <Alert tone="attention" className="max-w-md">      <AlertTriangleIcon />      <AlertTitle>3 studies past their SLA</AlertTitle>      <AlertDescription>Oldest has been unreported for 4 hours.</AlertDescription>    </Alert>  )}

Installation

npx shadcn@latest add https://qure-ui.qure.ai/r/alert.json

Usage

import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'

<Alert tone="attention">
  <AlertTriangleIcon />
  <AlertTitle>3 studies past their SLA</AlertTitle>
  <AlertDescription>Oldest has been unreported for 4 hours.</AlertDescription>
</Alert>

An icon is optional; when present the grid switches to two columns and the icon spans both rows, so a title and description align against it without any extra markup.

An Alert stays on the page and belongs to the thing it sits above. For something transient, or that reports the outcome of an action taken elsewhere, use a toast. For something that must be answered before anything else can happen, use a dialog — an alert cannot block, and a message that can be scrolled past is not a confirmation.

Tone

Draft saved locally.

Assigned to you.

Report signed and sent.

Prior study unavailable.

Critical finding awaiting acknowledgement.

import { Alert, AlertDescription } from '@/registry/qure/ui/alert'export default function AlertTone() {  return (    <div className="flex w-full max-w-md flex-col gap-3">      <Alert tone="neutral"><AlertDescription>Draft saved locally.</AlertDescription></Alert>      <Alert tone="brand"><AlertDescription>Assigned to you.</AlertDescription></Alert>      <Alert tone="success"><AlertDescription>Report signed and sent.</AlertDescription></Alert>      <Alert tone="attention"><AlertDescription>Prior study unavailable.</AlertDescription></Alert>      <Alert tone="urgent"><AlertDescription>Critical finding awaiting acknowledgement.</AlertDescription></Alert>    </div>  )}

The tones are Badge's, deliberately. A warning should read the same whether it is a chip in a table or a banner above a form. attention is "someone needs to look at this today"; urgent is "someone needs to look at this now" — if every alert on the page is urgent, none of them is.

With a title

3 studies past their SLA

Oldest has been unreported for 4 hours.

import { AlertTriangleIcon } from 'lucide-react'import { Alert, AlertDescription, AlertTitle } from '@/registry/qure/ui/alert'export default function AlertDemo() {  return (    <Alert tone="attention" className="max-w-md">      <AlertTriangleIcon />      <AlertTitle>3 studies past their SLA</AlertTitle>      <AlertDescription>Oldest has been unreported for 4 hours.</AlertDescription>    </Alert>  )}

Two lines: a title that states the fact, and a description that gives the detail behind it. Put the number in the title. "3 studies past their SLA" is read at a glance; "Some studies require attention" makes the reader open the description to learn anything.

Description only

Draft saved locally at 08:14.

The 12 Mar prior is still being retrieved from the archive.

import { Alert, AlertDescription } from '@/registry/qure/ui/alert'export default function AlertInline() {  return (    <div className="grid w-full max-w-md gap-3">      <Alert tone="neutral">        <AlertDescription>Draft saved locally at 08:14.</AlertDescription>      </Alert>      <Alert tone="attention">        <AlertDescription>The 12 Mar prior is still being retrieved from the archive.</AlertDescription>      </Alert>    </div>  )}

One sentence, no icon. The stylesheet drops the description's dimming when there is no title, so a single-line alert keeps full contrast. This is the right shape for status that sits inside a panel, where a title would repeat the panel's own heading.

With actions

Critical finding awaiting acknowledgement

ACC-482913 was flagged 11 minutes ago and has not been opened.

import { ShieldAlertIcon } from 'lucide-react'import { Alert, AlertDescription, AlertTitle } from '@/registry/qure/ui/alert'import { Button } from '@/registry/qure/ui/button'export default function AlertAction() {  return (    <Alert tone="urgent" className="max-w-md">      <ShieldAlertIcon />      <AlertTitle>Critical finding awaiting acknowledgement</AlertTitle>      <AlertDescription className="grid gap-3">        ACC-482913 was flagged 11 minutes ago and has not been opened.        <div className="flex gap-2">          <Button size="xs" variant="destructive">Acknowledge</Button>          <Button size="xs" variant="tertiary">Open study</Button>        </div>      </AlertDescription>    </Alert>  )}

Where the alert names something the reader can resolve, put the resolution in it. Keep it to two buttons at most, at xs, and make the first one the thing you expect them to do. An urgent alert with no action is a notification the interface has no answer for.

role="alert" is on the root, so screen readers announce the content as soon as it appears. That is right for something that has just gone wrong and wrong for static page furniture — for a permanent note, render a plain styled element instead. It is also an interruption: a role="alert" that re-renders on a poll will interrupt whatever is being read, every time.

The icon is decorative — the tone's meaning has to survive in the words. A screen reader gets the text and nothing else, and so does anyone with the page in greyscale.

API Reference

No primitive behind it. Alert, AlertTitle and AlertDescription each accept everything a div does, plus:

Prop

Type