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<Alert>
  <AlertTitle>Heads up!</AlertTitle>
  <AlertDescription>Something to know.</AlertDescription>
</Alert>

Alert — bloc informatif inline (non-modal, ne bloque pas). Variantes default (info) et destructive (rouge). Pour un dialog bloquant utiliser AlertDialog ; pour un toast éphémère Toast.

Installation

Terminal

$ bext ui add alert

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 />                       // optionnel
  ├── <AlertTitle>Title</AlertTitle>
  └── <AlertDescription>Body</AlertDescription>
</Alert>

API Reference

Alert

Prop	Type	Default	Description
variant	"default" \| "destructive"	"default"	undefined
children	ReactNode	—	undefined

AlertTitle

Prop	Type	Default	Description
children	ReactNode	—	Rendu comme font-medium.

AlertDescription

Prop	Type	Default	Description
children	ReactNode	—	Rendu comme text-sm text-muted-foreground.

Accessibility

role="alert" par défaut — annoncé immédiatement aux AT. Ne pas abuser (le screen reader interrompt sa lecture). Pour un update passif, préférer 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

Alert

Installation

Usage

Anatomy

API Reference

Alert

AlertTitle

font-medium.

AlertDescription

Accessibility