Alert

Code

import { Alert } from "@fadymondy/nasaq/web";export function SyncFailed() {  return (    <Alert tone="danger" title="Sync failed">      Could not reach the data source. Check the credentials.    </Alert>  );}

Alerts & Notifications · stable

Live examples and controls: Alert in the lab.

InstallCopy Anchor Link

npx shadcn@latest add https://docs.nasaqui.com/r/alert.json

A quiet, inline notice about the content next to it: a draft invoice that was not sent, a failed sync, a plan limit that is close. It sits in the page flow, stays until the situation changes or the user dismisses it, and never interrupts. Each tone has its own glyph, so it reads without colour.

Relationship to Attention. Attention is a sorted list of things the user should act on across the product ("What needs my attention?"), fed by the product. Alert is one message about the local context, written by the developer at the spot where it applies. If you have several items to triage, use Attention; if you have one sentence about this page or form, use Alert.

When to useCopy Anchor Link

• A persistent message tied to a page, card or form: warnings, limits, results, background information.
• Something the user may want to act on, with one action button beside it.

When not to useCopy Anchor Link

• A list of things to do: use Attention.
• A transient confirmation of something the user just did ("Saved"): use toast.
• A field-level validation message: use the Field error slot.
• A decision the user must make before continuing: use AlertDialog.
• A status next to a value in a table or header: use Status or Badge.

ImportCopy Anchor Link

import { Alert } from "@fadymondy/nasaq/web";
// inside this monorepo: "@nasaq/web"

Quick startCopy Anchor Link

import { Alert } from "@fadymondy/nasaq/web";

export function SyncFailed() {
  return (
    <Alert tone="danger" title="Sync failed">
      Could not reach the data source. Check the credentials.
    </Alert>
  );
}

AnatomyCopy Anchor Link

Alert                     role="alert" (warning, danger) or "status" (info, success)   data-slot="alert"
├─ icon                   tone glyph                                                   data-slot="alert-icon"
├─ body                                                                                data-slot="alert-body"
│  ├─ title               optional                                                     data-slot="alert-title"
│  └─ description         children                                                     data-slot="alert-description"
└─ actions                action and dismiss button                                    data-slot="alert-actions"

APICopy Anchor Link

AlertCopy Anchor Link

AlertProps extends ComponentProps<"div"> (without title).

AlertTone is the union of the four tone names.

ExamplesCopy Anchor Link

With action and dismissCopy Anchor Link

import { Alert, Button } from "@fadymondy/nasaq/web";
import { useState } from "react";

export function PaymentFailed() {
  const [open, setOpen] = useState(true);
  if (!open) return null;
  return (
    <Alert
      tone="danger"
      title="Payment failed"
      action={<Button size="sm">Update card</Button>}
      onDismiss={() => setOpen(false)}
    >
      The account is restricted in 3 days unless it is updated.
    </Alert>
  );
}

Arabic, one lineCopy Anchor Link

import { Alert } from "@fadymondy/nasaq/web";

export function DraftInvoice() {
  return <Alert tone="warning">هذه الفاتورة مسودة ولم تُرسل بعد.</Alert>;
}

AccessibilityCopy Anchor Link

• warning and danger use role="alert": assistive tech announces them immediately when they appear. info and success use role="status": announced politely. Override with role.
• Tone is carried by a distinct glyph as well as colour. The glyph is aria-hidden; put the meaning in the text ("Sync failed", not just red).
• The dismiss button is a real <button> with an aria-label; localise dismissLabel when not using the Nasaq provider.

RTL & i18nCopy Anchor Link

• The grid is icon, body, actions in inline order, so it mirrors in RTL. Text uses text-start; the action gap uses ms-3.
• Built-in string: the dismiss label, "Dismiss" or "تجاهل" when the Nasaq locale starts with ar.

Styling & tokensCopy Anchor Link

• Surface: bg-nq-{tone}-soft, border-nq-{tone}/30, rounded-card; glyph text-nq-{tone}-text; text stays text-foreground / text-muted-foreground.
• Target [data-slot=alert], [data-tone=warning], alert-title, alert-description, alert-actions. Extend with className.

Do / Don'tCopy Anchor Link

• Do say what happened and what to do, in the title or description.
• Do keep one action at most; put the primary next step there.
• Don't stack more than two alerts on a page; a list belongs in Attention.
• Don't use danger for things that are merely unusual.

RelatedCopy Anchor Link

• Attention · Toast · Status · Badge

LabCopy Anchor Link

https://docs.nasaqui.com/?path=/docs/components-alerts-notifications-alert--docs