Detail Actions

DetailActions renders the action button row on entity detail pages. Actions include Edit, Delete, Duplicate, and any custom actions defined in the entity config.

Import


import { DetailActions } from "@phpcreation/frontend-crud-react-nextjs-bundle/components/DetailActions";

Default Actions

Action	Behavior
Edit	Navigates to the edit page
Delete	Opens `ConfirmationModal`, then DELETEs
Duplicate	Opens `QuickDuplicate` modal
Print	Opens `PrintModal`
Email	Opens `EmailModal`

Usage


import { DetailShowContext } from "...";
import { DetailActions } from "...";
 
<DetailShowContext entityConfig={entityConfig} id={id}>
  <DetailActions actions={entityDetailActions} />
</DetailShowContext>

Custom Actions

Add custom actions in the entity config:


export const entityDetailActions = [
  { type: "edit" },
  { type: "delete" },
  {
    type: "custom",
    label: "Send Invoice",
    icon: SendIcon,
    onClick: (entity) => sendInvoice(entity.id),
  },
];

useActionButtons Hook

DetailActions uses useActionButtons internally to compute the final action list based on user permissions and entity state.

Action visibility can be controlled per-action using the showWhen condition or user permission checks via AuthContext.