Skip to main content
RefineDocumentation
Version: 5.xx.xx
Source Code

Delete

<DeleteButton> uses shadcn/ui's <Button> and <Popover> components.

When you try to delete something, a popover shows up and asks for confirmation. When confirmed it executes the useDelete method provided by your dataProvider.

Installation​

npx shadcn@latest add https://ui.refine.dev/r/buttons.json

This will add all button components including DeleteButton.

Usage​

import { DeleteButton } from "@/components/refine-ui/buttons/delete";
import { Table, TableBody, TableCell, TableRow } from "@/components/ui/table";

const PostList = () => {
  const posts = [
    { id: 1, title: "First Post" },
    { id: 2, title: "Second Post" },
  ];

  return (
    <Table>
      <TableBody>
        {posts.map((post) => (
          <TableRow key={post.id}>
            <TableCell>{post.title}</TableCell>
            <TableCell>
              <DeleteButton resource="posts" recordItemId={post.id} />
            </TableCell>
          </TableRow>
        ))}
      </TableBody>
    </Table>
  );
};

Properties​

recordItemId​

recordItemId allows us to manage which record will be deleted. By default, the recordItemId is inferred from the route params.

import { DeleteButton } from "@/components/refine-ui/buttons/delete";

const MyComponent = () => {
  return <DeleteButton resource="posts" recordItemId="123" />;
};

resource​

resource is used to determine which resource the record belongs to. By default, the resource is inferred from the current route.

import { DeleteButton } from "@/components/refine-ui/buttons/delete";

const MyComponent = () => {
  return <DeleteButton resource="categories" recordItemId="123" />;
};

onSuccess​

onSuccess callback allows you to do something after the deletion is successful.

import { DeleteButton } from "@/components/refine-ui/buttons/delete";

const MyComponent = () => {
  return (
    <DeleteButton
      recordItemId="123"
      onSuccess={(value) => {
        console.log("Record deleted successfully", value);
      }}
    />
  );
};

confirmTitle​

You can change the confirmation dialog title with the confirmTitle prop.

import { DeleteButton } from "@/components/refine-ui/buttons/delete";

const MyComponent = () => {
  return <DeleteButton recordItemId="123" confirmTitle="Delete this post?" />;
};

confirmOkText​

You can change the confirmation dialog's "Delete" button text with the confirmOkText prop.

import { DeleteButton } from "@/components/refine-ui/buttons/delete";

const MyComponent = () => {
  return <DeleteButton recordItemId="123" confirmOkText="Yes, delete it" />;
};

confirmCancelText​

You can change the confirmation dialog's "Cancel" button text with the confirmCancelText prop.

import { DeleteButton } from "@/components/refine-ui/buttons/delete";

const MyComponent = () => {
  return <DeleteButton recordItemId="123" confirmCancelText="No, keep it" />;
};

meta​

It is used to pass additional parameters to the delete method of your dataProvider.

const MyComponent = () => {
  return <DeleteButton meta={{ authorId: "10" }} />;
};

hideText​

It is used to show and not show the text of the button. When true, only the button icon is visible.

import { DeleteButton } from "@/components/refine-ui/buttons/delete";

const MyComponent = () => {
  return <DeleteButton recordItemId="123" hideText={true} />;
};

accessControl​

This prop can be used to skip access control check with its enabled property or to hide the button when the user does not have the permission to access the resource with hideIfUnauthorized property. This is relevant only when an accessControlProvider is provided to <Refine/>.

import { DeleteButton } from "@/components/refine-ui/buttons/delete";

const MyComponent = () => {
  return (
    <DeleteButton
      accessControl={{
        enabled: true,
        hideIfUnauthorized: true,
      }}
    />
  );
};

successNotification​

You can customize or disable the success notification that appears after successful deletion.

import { DeleteButton } from "@/components/refine-ui/buttons/delete";

const MyComponent = () => {
  return (
    <DeleteButton
      recordItemId="123"
      successNotification={{
        message: "Post deleted successfully!",
        description: "The post has been removed from your blog.",
        type: "success",
      }}
    />
  );
};

Set to false to disable:

<DeleteButton recordItemId="123" successNotification={false} />

errorNotification​

You can customize or disable the error notification that appears when deletion fails.

import { DeleteButton } from "@/components/refine-ui/buttons/delete";

const MyComponent = () => {
  return (
    <DeleteButton
      recordItemId="123"
      errorNotification={{
        message: "Failed to delete post",
        description: "Please try again later.",
        type: "error",
      }}
    />
  );
};

Set to false to disable:

<DeleteButton recordItemId="123" errorNotification={false} />

children​

It is used to change the text of the button. By default, the text is "Delete".

import { DeleteButton } from "@/components/refine-ui/buttons/delete";

const MyComponent = () => {
  return <DeleteButton recordItemId="123">Remove</DeleteButton>;
};

API Reference​

Properties​

PropertyTypeDefaultDescription
recordItemIdBaseKey (string or number)Inferred from route paramsThe ID of the record to delete
resourcestringInferred from routeThe resource name or identifier
onSuccess(value: any) => void-Callback function invoked after successful deletion
confirmTitlestring"Are you sure?"Title for the confirmation popover
confirmOkTextstring"Delete"Text for the confirm button in the popover
confirmCancelTextstring"Cancel"Text for the cancel button in the popover
successNotificationstring \| false \| objectDefault messageNotification message on successful deletion. Set to false to disable
errorNotificationstring \| false \| objectDefault messageNotification message on error. Set to false to disable
metaRecord<string, unknown>-Additional metadata to pass to the delete method
hideTextbooleanfalseIf true, only the icon will be shown
accessControl{ enabled?: boolean; hideIfUnauthorized?: boolean }{ enabled: true, hideIfUnauthorized: false }Configures access control behavior
childrenReactNodeDefault text & iconCustom content for the button
...restReact.ComponentProps<typeof Button>-Other props are passed to the underlying shadcn/ui Button component (e.g., variant, size, className, onClick)
External Props

It also accepts all props of shadcn/ui Button.

Previous
Create
Next
Edit