Alert

import { Alert } from "@compa11y/react";

import { useState } from "react";
import { Alert, Button, Link } from "@compa11y/react";

// Error alert with action
<Alert type="error" title="Payment failed">
  Your card was declined. Please try a different payment method.
</Alert>

// Success alert
<Alert type="success" title="Saved!">
  Your changes have been saved successfully.
</Alert>

// Warning with a link
<Alert type="warning" title="Session expiring">
  Your session will expire in 5 minutes. <Link href="/settings">Extend session</Link>
</Alert>

// Dismissible info
function DismissibleAlert() {
  const [visible, setVisible] = useState(true);

  if (!visible) return null;

  return (
    <Alert type="info" dismissible onDismiss={() => setVisible(false)}>
      A new version is available. <Button variant="ghost" size="sm">Update now</Button>
    </Alert>
  );
}