Alert

Demos

An alert with an icon, a title, and a description.

Fast for 8 hours before your draw

Water is fine. Glucose and lipid results are only accurate after a fast.

"use client"

import { InfoIcon } from "lucide-react"

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

export function AlertDemo() {
  return (
    <Alert className="max-w-md">
      <InfoIcon />
      <AlertTitle>Fast for 8 hours before your draw</AlertTitle>
      <AlertDescription>
        Water is fine. Glucose and lipid results are only accurate after a fast.
      </AlertDescription>
    </Alert>
  )
}

Usage

Use an alert for information that sits in the page and stays there: a preparation step, a failed sample, a retest that is due. If the reader must respond before they continue, use an Alert Dialog instead.

Import it from @workspace/ui/components/alert.

Anatomy

Alert — The box. An svg placed first becomes the icon column.
AlertTitle — One line that says what happened.
AlertDescription — Supporting text. Links inside it are underlined.
AlertAction — A slot in the top corner for one small button.

Notes

The alert has role="alert", so screen readers announce it when it appears. Do not use it for content that is always on the page and not urgent.
Keep the title short. Put the detail and the next step in the description.
Use destructive only for errors the reader needs to fix.

Examples

Destructive

For errors, such as a sample the lab could not use.

Sample could not be processed

The lab received a haemolysed sample. Book a new draw to get your results.

"use client"

import { TriangleAlertIcon } from "lucide-react"

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

export function AlertDestructive() {
  return (
    <Alert variant="destructive" className="max-w-md">
      <TriangleAlertIcon />
      <AlertTitle>Sample could not be processed</AlertTitle>
      <AlertDescription>
        The lab received a haemolysed sample. Book a new draw to get your results.
      </AlertDescription>
    </Alert>
  )
}

With action

AlertAction places a button in the corner and leaves room for it.

Retest due

Your last panel was 6 months ago.

"use client"

import { CalendarIcon } from "lucide-react"

import {
  Alert,
  AlertAction,
  AlertDescription,
  AlertTitle,
} from "@workspace/ui/components/alert"
import { Button } from "@workspace/ui/components/button"

export function AlertWithAction() {
  return (
    <Alert className="max-w-md">
      <CalendarIcon />
      <AlertTitle>Retest due</AlertTitle>
      <AlertDescription>Your last panel was 6 months ago.</AlertDescription>
      <AlertAction>
        <Button size="sm" variant="outline">
          Book
        </Button>
      </AlertAction>
    </Alert>
  )
}

Title only

Leave out the description for a one-line message.

All 42 biomarkers are back.

"use client"

import { CircleCheckIcon } from "lucide-react"

import { Alert, AlertTitle } from "@workspace/ui/components/alert"

export function AlertTitleOnly() {
  return (
    <Alert className="max-w-md">
      <CircleCheckIcon className="text-status-normal" />
      <AlertTitle>All 42 biomarkers are back.</AlertTitle>
    </Alert>
  )
}

Props

Unlisted props pass through to the underlying div.

Alert

Prop	Type	Default	Description
`variant`	`"default" or "destructive"`	`default`	Colour of the text and icon.
`className`	`string`	—	Classes merged onto the box.