BulkDeleteButton

Lets the user delete selected records in a list using dataProvider.deleteMany(). To be used in a ListContext (e.g., inside a <DataTable>).

Usage

<BulkDeleteButton> is one fo the default bulk action buttons of <DataTable>, so you will need to use it only when you want to customize these bulk actions:

import { DataTable, BulkDeleteButton } from "@/components/admin";
 
const BulkActions = () => (
  <>
    <BulkDeleteButton />
    {/* other bulk action buttons */}
  </>
);
 
<DataTable bulkActionsButtons={<BulkActions />}>
  {/* table content */}
</DataTable>;

On success, the button empties the selection, and notifies the user with the key resources.<resource>.notifications.deleted (fallback ra.notification.deleted).

On error, it notifies with an error message or ra.notification.http_error, then refreshes list.

Named exports

<BulkDeleteButton> ships with two named variants for callers who want a specific behavior without setting mutationMode:

import { BulkDeleteWithConfirmButton, BulkDeleteWithUndoButton } from '@/components/admin';
 
// Opens a confirm dialog
<BulkDeleteWithConfirmButton />
 
// Fires immediately with undo
<BulkDeleteWithUndoButton />

Props

Additional props are passed to the underlying shadcn/ui <Button> component.

icon

Replaces the default <Trash /> shown alongside the label. Pass any React node — typically another lucide-react icon.

import { Archive } from "lucide-react";
 
<BulkDeleteButton icon={<Archive />} />;

label

By default, the label is the translation of the ra.action.delete key, which reads "Delete".

You can customize the label for a specific resource by adding a resources.{resource}.action.delete key to your translation messages. It receives %{name} (the singular resource name):

const messages = {
  resources: {
    posts: {
      action: {
        delete: "Remove %{name}",
      },
    },
  },
};

You can also pass a custom string or translation key directly via the label prop:

<BulkDeleteButton label="Remove selected" />
<BulkDeleteButton label="resources.posts.action.delete" />

ref

Forwards a ref to the underlying <Button> element.

import { useRef } from "react";
 
const ref = useRef<HTMLButtonElement>(null);
<BulkDeleteButton ref={ref} />;

Soft Delete

If your data provider supports soft delete (see Soft Delete Features), you can use an alternative BulkSoftDeleteButton that performs a soft delete instead of a permanent delete.

You can then choose to either restore the records with a BulkRestoreButton, or delete them permanently with a BulkDeletePermanentlyButton.