Alert

Usage

import {
  Alert,
  AlertIcon,
  AlertContent,
  AlertText,
  AlertTitle,
  AlertDescription,
  AlertActions,
  AlertClose,
} from '@acronis-platform/ui-react';

Alert is an inline status banner (role="alert"). Its surface is neutral in every severity — the severity is carried by a status-colored border and a 6px status line down the leading edge. variant selects it: info (default), success, warning, critical, or danger. Every value comes from the --ui-alert-* token tier, so brand overrides apply without touching the markup.

AlertIcon needs no children — it renders the variant's own multicolor status icon (CircleInfoBlue, CircleCheckGreen, TriangleWarningYellow, CircleWarningOrange, DiamondWarningRed). Pass children only to substitute a different glyph.

The status line sits on the inline-start edge, so it moves to the right under dir="rtl"; the status icons are direction-agnostic and never mirror.

Examples

The full composition — note that the title and description go inside AlertText, whose vertical padding is what keeps the first line of text aligned with the icon:

<Alert variant="danger">
  <AlertIcon />
  <AlertContent>
    <AlertText>
      <AlertTitle>Session expired</AlertTitle>
      <AlertDescription>Sign in again to keep working.</AlertDescription>
    </AlertText>
  </AlertContent>
  <AlertClose onClick={dismiss} />
</Alert>

Add remedies with AlertActions, inside AlertContent after AlertText. The row wraps when it runs out of width:

<Alert variant="critical">
  <AlertIcon />
  <AlertContent>
    <AlertText>
      <AlertTitle>Protect non-compliant devices</AlertTitle>
      <AlertDescription>Ensure a protection plan is applied…</AlertDescription>
    </AlertText>
    <AlertActions>
      <Button variant="secondary">View devices</Button>
      <Button variant="ghost">Dismiss for now</Button>
    </AlertActions>
  </AlertContent>
  <AlertClose onClick={dismiss} />
</Alert>

Rendering AlertClose is what makes an alert dismissable — it does not remove itself, so wire onClick to your own state. Omit it, and the description, for a permanent one-line banner:

<Alert variant="success">
  <AlertIcon />
  <AlertContent>
    <AlertText>
      <AlertTitle>Your changes were saved</AlertTitle>
    </AlertText>
  </AlertContent>
</Alert>

AlertClose's accessible name defaults to "Close"; override it via ariaLabel to localize.

For transient, auto-dismissing notifications use Toast; for a blocking confirmation use Dialog.

API Reference

AlertIcon, AlertContent, AlertText, AlertTitle, AlertDescription, and AlertActions accept the props of their underlying element plus className.