Alert

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

// onDismiss shows the close button; you decide what dismissing does.
export default function AlertDismissibleExample() {
  const [open, setOpen] = useState(true);
  return (
    <div className="flex w-[28rem] max-w-full flex-col items-center gap-3">
      {open ? (
        <Alert variant="info" title="New: keyboard shortcuts" onDismiss={() => setOpen(false)}>
          Press ? anywhere to see them all.
        </Alert>
      ) : (
        <Button variant="secondary" size="sm" onPress={() => setOpen(true)}>
          Show the message again
        </Button>
      )}
    </div>
  );
}

import { Alert, Button } from "@rdloom/react";

export default function AlertWithActionExample() {
  return (
    <div className="w-[28rem] max-w-full">
      <Alert variant="danger" title="Sync failed">
        <p>We couldn&apos;t reach the server. Your changes are saved on this device.</p>
        <div className="mt-2">
          <Button size="sm" variant="secondary">
            Try again
          </Button>
        </div>
      </Alert>
    </div>
  );
}