Alerts

Alerts communicate system status, validation outcomes, and policy messages. Aggarly Platform alerts are token-driven, theme-safe, RTL-safe, and include optional icons, labels, actions, dismiss behavior, and live announcement support.

Default Alerts (All Tones)

Use tone for semantic meaning; use icons for faster scanning in enterprise screens.

Primary alert.

Secondary alert.

Changes saved.

Review required.

Action failed.

FYI message.

General notice.

Show code

import { Alert } from "@/design-system/components/Alert";

function IconInfo() { /* ... */ }
function IconCheck() { /* ... */ }
function IconWarning() { /* ... */ }
function IconDanger() { /* ... */ }

export function Example() {
  return (
    <div className="alerts-stack">
      <Alert tone="primary" icon={<IconInfo />} heading="Primary" description="Primary alert." />
      <Alert tone="secondary" icon={<IconInfo />} heading="Secondary" description="Secondary alert." />
      <Alert tone="success" icon={<IconCheck />} heading="Success" description="Changes saved." />
      <Alert tone="warning" icon={<IconWarning />} heading="Warning" description="Review required." />
      <Alert tone="danger" icon={<IconDanger />} heading="Danger" description="Action failed." />
      <Alert tone="info" icon={<IconInfo />} heading="Info" description="FYI message." />
      <Alert tone="neutral" icon={<IconInfo />} heading="Neutral" description="General notice." />
    </div>
  );
}

Outline Alerts

Outline is low emphasis—ideal inside dense dashboards, lists, and tables.

Outline is ideal for low-emphasis notices inside dense screens.

Use for warning contexts that should not visually dominate.

Show code

import { Alert } from "@/design-system/components/Alert";

function IconInfo() { /* ... */ }
function IconDanger() { /* ... */ }

export function Example() {
  return (
    <div className="alerts-stack">
      <Alert
        tone="info"
        variant="outline"
        icon={<IconInfo />}
        heading="Outline alert"
        description="Outline is ideal for low-emphasis notices inside dense screens."
      />
      <Alert
        tone="danger"
        variant="outline"
        icon={<IconDanger />}
        heading="Outline danger"
        description="Use for warning contexts that should not visually dominate."
      />
    </div>
  );
}

Borderless Alerts

Borderless is visually light—great for inline confirmations inside cards/panels.

Inline confirmation inside a workflow card.

General note without drawing too much attention.

Show code

import { Alert } from "@/design-system/components/Alert";

function IconCheck() { /* ... */ }
function IconInfo() { /* ... */ }

export function Example() {
  return (
    <div className="alerts-stack">
      <Alert
        tone="success"
        variant="borderless"
        icon={<IconCheck />}
        heading="Borderless success"
        description="Inline confirmation inside a workflow card."
      />
      <Alert
        tone="neutral"
        variant="borderless"
        icon={<IconInfo />}
        heading="Borderless neutral"
        description="General note without drawing too much attention."
      />
    </div>
  );
}

Solid Alerts

Solid alerts are high emphasis—use for banners, critical actions, or high-salience confirmations.

Student profile updated successfully.

A supervisor review is pending.

You do not have access to this export.

Show code

import { Alert } from "@/design-system/components/Alert";

function IconCheck() { /* ... */ }
function IconWarning() { /* ... */ }
function IconDanger() { /* ... */ }

export function Example() {
  return (
    <div className="alerts-stack">
      <Alert
        tone="success"
        variant="solid"
        icon={<IconCheck />}
        heading="Saved"
        description="Student profile updated successfully."
        dismissible
      />
      <Alert
        tone="warning"
        variant="solid"
        icon={<IconWarning />}
        heading="Action required"
        description="A supervisor review is pending."
        dismissible
      />
      <Alert
        tone="danger"
        variant="solid"
        icon={<IconDanger />}
        heading="Blocked"
        description="You do not have access to this export."
        dismissible
      />
    </div>
  );
}

Dismissible Alerts

Use dismissible alerts for informational notices. Avoid dismiss for required compliance steps.

Users can dismiss informational notices.

Show code

import { Alert } from "@/design-system/components/Alert";

function IconInfo() { /* ... */ }

export function Example() {
  return (
    <Alert
      tone="neutral"
      icon={<IconInfo />}
      heading="Dismissible alert"
      description="Users can dismiss informational notices."
      dismissible
    />
  );
}

Link-colored Alerts

Links inside alerts automatically inherit tone coloring for clear hierarchy.

Your report export is ready. Open reports.

Show code

import { Alert } from "@/design-system/components/Alert";

function IconInfo() { /* ... */ }

export function Example() {
  return (
    <Alert
      tone="primary"
      icon={<IconInfo />}
      heading="Export ready"
      description={
        <>
          Your report export is ready. <a href="#">Open reports</a>.
        </>
      }
    />
  );
}

Live Alerts

Use live announcements for async events (uploads, saves, errors). Choose polite vs assertive carefully.

This is announced non-blocking.

This is announced immediately.

Show code

import { Alert } from "@/design-system/components/Alert";

function IconCheck() { /* ... */ }
function IconDanger() { /* ... */ }

export function Example() {
  return (
    <div className="alerts-stack">
      <Alert
        tone="success"
        icon={<IconCheck />}
        heading="Live (polite)"
        description="This is announced non-blocking."
        live="polite"
      />
      <Alert
        tone="danger"
        icon={<IconDanger />}
        heading="Live (assertive)"
        description="This is announced immediately."
        live="assertive"
      />
    </div>
  );
}

Alerts With Content + Actions

Enterprise pattern: label + title + rich content + primary/secondary actions.

Your last payment attempt failed. Update your card to prevent service disruption.

Card expired
Bank declined the transaction
Billing ZIP mismatch

Show code

import { Alert } from "@/design-system/components/Alert";
import { Button } from "@/design-system/components/Button";

function IconWarning() { /* ... */ }

export function Example() {
  return (
    <Alert
      tone="warning"
      icon={<IconWarning />}
      label="Billing"
      heading="Payment method requires attention"
      actions={
        <div className="alerts-row">
          <Button size="sm" variant="ghost">Dismiss</Button>
          <Button size="sm" variant="primary">Update</Button>
        </div>
      }
    >
      <div className="stack-xs">
        <div className="text-muted">
          Your last payment attempt failed. Update your card to prevent service disruption.
        </div>
        <ul className="list-muted stack-xxs">
          <li>Card expired</li>
          <li>Bank declined the transaction</li>
          <li>Billing ZIP mismatch</li>
        </ul>
      </div>
    </Alert>
  );
}

Label + Icon + Arrow Tag + Callout

Premium coaching/callout style: arrow label and a callout notch on the alert container.

Read the updated documentation for exports and audit logs.

Show code

import { Alert } from "@/design-system/components/Alert";

function IconInfo() { /* ... */ }

export function Example() {
  return (
    <Alert
      tone="info"
      variant="soft"
      icon={<IconInfo />}
      label="System"
      labelStyle="arrow"
      heading="New policy update"
      description="Read the updated documentation for exports and audit logs."
      withCalloutArrow
    />
  );
}

import { Alert } from "@/design-system/components/Alert"; function IconInfo() { /* ... */ } function IconCheck() { /* ... */ } function IconWarning() { /* ... */ } function IconDanger() { /* ... */ } export function Example() { return ( <div className="alerts-stack"> <Alert tone="primary" icon={<IconInfo />} heading="Primary" description="Primary alert." /> <Alert tone="secondary" icon={<IconInfo />} heading="Secondary" description="Secondary alert." /> <Alert tone="success" icon={<IconCheck />} heading="Success" description="Changes saved." /> <Alert tone="warning" icon={<IconWarning />} heading="Warning" description="Review required." /> <Alert tone="danger" icon={<IconDanger />} heading="Danger" description="Action failed." /> <Alert tone="info" icon={<IconInfo />} heading="Info" description="FYI message." /> <Alert tone="neutral" icon={<IconInfo />} heading="Neutral" description="General notice." /> </div> ); }

import { Alert } from "@/design-system/components/Alert"; function IconInfo() { /* ... */ } function IconDanger() { /* ... */ } export function Example() { return ( <div className="alerts-stack"> <Alert tone="info" variant="outline" icon={<IconInfo />} heading="Outline alert" description="Outline is ideal for low-emphasis notices inside dense screens." /> <Alert tone="danger" variant="outline" icon={<IconDanger />} heading="Outline danger" description="Use for warning contexts that should not visually dominate." /> </div> ); }

import { Alert } from "@/design-system/components/Alert"; function IconCheck() { /* ... */ } function IconInfo() { /* ... */ } export function Example() { return ( <div className="alerts-stack"> <Alert tone="success" variant="borderless" icon={<IconCheck />} heading="Borderless success" description="Inline confirmation inside a workflow card." /> <Alert tone="neutral" variant="borderless" icon={<IconInfo />} heading="Borderless neutral" description="General note without drawing too much attention." /> </div> ); }

import { Alert } from "@/design-system/components/Alert"; function IconCheck() { /* ... */ } function IconWarning() { /* ... */ } function IconDanger() { /* ... */ } export function Example() { return ( <div className="alerts-stack"> <Alert tone="success" variant="solid" icon={<IconCheck />} heading="Saved" description="Student profile updated successfully." dismissible /> <Alert tone="warning" variant="solid" icon={<IconWarning />} heading="Action required" description="A supervisor review is pending." dismissible /> <Alert tone="danger" variant="solid" icon={<IconDanger />} heading="Blocked" description="You do not have access to this export." dismissible /> </div> ); }

import { Alert } from "@/design-system/components/Alert"; function IconInfo() { /* ... */ } export function Example() { return ( <Alert tone="neutral" icon={<IconInfo />} heading="Dismissible alert" description="Users can dismiss informational notices." dismissible /> ); }

import { Alert } from "@/design-system/components/Alert"; function IconInfo() { /* ... */ } export function Example() { return ( <Alert tone="primary" icon={<IconInfo />} heading="Export ready" description={ <> Your report export is ready. <a href="#">Open reports</a>. </> } /> ); }

import { Alert } from "@/design-system/components/Alert"; function IconCheck() { /* ... */ } function IconDanger() { /* ... */ } export function Example() { return ( <div className="alerts-stack"> <Alert tone="success" icon={<IconCheck />} heading="Live (polite)" description="This is announced non-blocking." live="polite" /> <Alert tone="danger" icon={<IconDanger />} heading="Live (assertive)" description="This is announced immediately." live="assertive" /> </div> ); }

import { Alert } from "@/design-system/components/Alert"; import { Button } from "@/design-system/components/Button"; function IconWarning() { /* ... */ } export function Example() { return ( <Alert tone="warning" icon={<IconWarning />} label="Billing" heading="Payment method requires attention" actions={ <div className="alerts-row"> <Button size="sm" variant="ghost">Dismiss</Button> <Button size="sm" variant="primary">Update</Button> </div> } > <div className="stack-xs"> <div className="text-muted"> Your last payment attempt failed. Update your card to prevent service disruption. </div> <ul className="list-muted stack-xxs"> <li>Card expired</li> <li>Bank declined the transaction</li> <li>Billing ZIP mismatch</li> </ul> </div> </Alert> ); }

import { Alert } from "@/design-system/components/Alert"; function IconInfo() { /* ... */ } export function Example() { return ( <Alert tone="info" variant="soft" icon={<IconInfo />} label="System" labelStyle="arrow" heading="New policy update" description="Read the updated documentation for exports and audit logs." withCalloutArrow /> ); }