Action Button

import { ActionButton } from "@rdloom/react";

export default function ActionButtonWithConfirmExample() {
  return (
    <ActionButton
      variant="danger"
      confirm={{
        title: "Delete this user?",
        description: "Asha Menon will lose access immediately. This cannot be undone.",
        confirmLabel: "Delete user",
      }}
      onAction={async () => {
        // Remove the user here.
      }}
      successMessage="User deleted"
      errorMessage="Could not delete the user"
    >
      Delete user
    </ActionButton>
  );
}

import { ActionButton } from "@rdloom/react";

export default function ActionButtonTypeToConfirmExample() {
  return (
    <ActionButton
      variant="danger"
      confirm={{
        title: "Delete this project?",
        description: "Every file and member in Northwind will be removed.",
        confirmLabel: "Delete project",
        confirmText: "Northwind",
      }}
      onAction={async () => {
        // Remove the project here.
      }}
    >
      Delete project
    </ActionButton>
  );
}

import { ActionButton } from "@rdloom/react";

// The server must still check every action: these only change what people see.
export default function ActionButtonPermissionStatesExample() {
  const act = async () => {};
  return (
    <div className="flex flex-wrap items-center gap-3">
      <ActionButton permission="allow" onAction={act}>
        Allowed
      </ActionButton>
      <ActionButton permission={{ state: "disabled", reason: "Only admins can export" }} variant="secondary" onAction={act}>
        Export (disabled with reason)
      </ActionButton>
      <ActionButton permission="hidden" onAction={act}>
        Hidden
      </ActionButton>
    </div>
  );
}

import { useState } from "react";
import { ActionButton, type ActionState } from "@rdloom/react";

const wait = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));

export default function ActionButtonAsyncResultExample() {
  const [log, setLog] = useState("Nothing yet");
  return (
    <div className="flex flex-col gap-3">
      <div className="flex flex-wrap gap-3">
        <ActionButton
          onAction={async () => {
            await wait(1000);
            return "Saved";
          }}
          successMessage="Saved"
          onSuccess={(result) => setLog(`Success: ${String(result)}`)}
          onStateChange={(state: ActionState) => {
            if (state === "pending") setLog("Working");
          }}
        >
          Save changes
        </ActionButton>
        <ActionButton
          variant="secondary"
          onAction={async () => {
            await wait(1000);
            throw new Error("The server said no");
          }}
          errorMessage="Could not sync"
          onError={(error) => setLog(`Error: ${(error as Error).message}`)}
        >
          Sync (fails)
        </ActionButton>
      </div>
      <p className="text-sm text-[var(--rd-color-text-muted)]">{log}</p>
    </div>
  );
}