Alert

Displays a callout for user attention.

Heads up!

You can add components to your app using the CLI.

Error

Your session has expired. Please log in again.

tsx

1
2
3
4
5
6
7
8
9
10<div className="w-full max-w-md space-y-4">
  <Alert>
    <AlertTitle>Heads up!</AlertTitle>
    <AlertDescription>You can add components to your app using the CLI.</AlertDescription>
  </Alert>
  <Alert variant="destructive">
    <AlertTitle>Error</AlertTitle>
    <AlertDescription>Your session has expired. Please log in again.</AlertDescription>
  </Alert>
</div>

Alert is an inline informational block (non-modal, does not block interaction). Variants: default (info) and destructive (red). For a blocking dialog use AlertDialog; for a transient toast use Toast.

Installation

Terminal

$ bext ui add alert

Copy and paste the following into src/components/ui/alert.tsx.

alert.tsx

1
2
3
4
5
6
7
8
9
10<div className="w-full max-w-md space-y-4">
  <Alert>
    <AlertTitle>Heads up!</AlertTitle>
    <AlertDescription>You can add components to your app using the CLI.</AlertDescription>
  </Alert>
  <Alert variant="destructive">
    <AlertTitle>Error</AlertTitle>
    <AlertDescription>Your session has expired. Please log in again.</AlertDescription>
  </Alert>
</div>

Usage

tsx

1
2
3
4
5
6import { Alert, AlertTitle, AlertDescription } from "@bext-stack/ui/primitives"

<Alert>
  <AlertTitle>Heads up!</AlertTitle>
  <AlertDescription>You can add components to your app using the CLI.</AlertDescription>
</Alert>

Anatomy

<Alert>
  ├── <icon />                       // optional
  ├── <AlertTitle>Title</AlertTitle>
  └── <AlertDescription>Body</AlertDescription>

API Reference

Alert

Prop	Type	Default	Description
variant	"default" \| "destructive"	"default"	destructive: red border and text, and an alert-circle icon instead of the info icon.
iconName	string	—	Name of a built-in icon to show instead of the default one. An icon is always rendered.
title	string	—	Shorthand: renders an AlertTitle with this text and uses children as the description.
children	ReactNode	—	An AlertTitle and an AlertDescription (or the description text when title is set).

AlertTitle

Prop	Type	Default	Description
children	ReactNode	—	Rendered as a <div> with font-medium, not as a heading.

AlertDescription

Prop	Type	Default	Description
children	ReactNode	—	Rendered as a <div> with text-sm text-muted-foreground.

Accessibility

role="alert" by default, so it is announced immediately to assistive technologies. Use it sparingly: the screen reader interrupts what it is reading. For a passive update, prefer role="status" aria-live="polite".

Try it live Open in play

Edit this example live in the bext playground. It compiles and runs entirely in your browser.

src/app/page.tsx 1 file · react · runs in your browser

// An alert calls out a short, important message. Each variant
// pairs an icon glyph with a title and a line of description.
function Alert({ icon, title, body, tone }) {
  const colors = tone === "destructive"
    ? { border: "#fecaca", bg: "#fef2f2", fg: "#dc2626" }
    : { border: "#e2e8f0", bg: "#fff", fg: "#0a0a0a" };
  return (
    <div style={{ display: "flex", gap: 12, padding: 16, borderRadius: 10, border: "1px solid " + colors.border, background: colors.bg }}>
      <span style={{ fontSize: 16, lineHeight: "20px", color: colors.fg }}>{icon}</span>
      <div>
        <div style={{ fontWeight: 600, fontSize: 14, color: colors.fg }}>{title}</div>
        <div style={{ fontSize: 14, color: tone === "destructive" ? "#b91c1c" : "#64748b", marginTop: 2 }}>{body}</div>
      </div>
    </div>
  );
}

The React idiom: same UI, for comparison.

← Accordion Alert Dialog →

On This Page