Alert

Status banner with success, warn, error, and info variants. Pass icons or actions through optional left and right slots.

Your changes have been saved.
A new version is available.
AlertExamples.tsrx
import { Alert } from "@octaneui/core";
import {
  CircleCheck,
  CircleX,
  Info,
  TriangleAlert,
  X,
} from "@octaneui/icons/lucide";

export function AlertExamples() @{
  <div class="stack">
    <Alert variant="success" left={<CircleCheck size={16} />}>
      Your changes have been saved.
    </Alert>
    <Alert variant="warn" left={<TriangleAlert size={16} />}>
      Your session expires in 5 minutes.
    </Alert>
    <Alert variant="error" left={<CircleX size={16} />}>
      Could not connect to the server.
    </Alert>
    <Alert variant="info" left={<Info size={16} />} right={<X size={16} />}>
      A new version is available.
    </Alert>

    <style>
      .stack {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        width: 100%;
      }
    </style>
  </div>
}