LLabanaat

Alert

Inline status message. Uses role="alert" for danger/warning variants so assistive tech announces it immediately; role="status" otherwise.

<Alert variant="warning" title="Payment method expiring">Update your card before the end of the month.</Alert>

Editable — change the code above and the preview updates live.

Variants

<div className="ui-flex ui-w-full ui-flex-col ui-gap-3">
  <Alert variant="neutral" title="Heads up">A neutral, informational message.</Alert>
  <Alert variant="success" title="Saved">Your changes were saved successfully.</Alert>
  <Alert variant="danger" title="Something went wrong">The request could not be completed.</Alert>
</div>

Editable — change the code above and the preview updates live.

Installation

import { Alert } from "@labanaat/ui/alert";

Props

PropTypeDefaultDescription
variant"neutral" | "success" | "warning" | "danger""neutral"Visual style; also determines alert vs. status role
titleReactNode—Optional bold title line
iconReactNode—Decorative icon slot