<SoftDeleteButton>

A button that soft-deletes the current record. By default, its label is “Archive” instead of “Delete”, to reflect the fact that the record is not permanently deleted.

A soft delete button in a `<DataTable>`

Usage

<SoftDeleteButton> reads the current record from RecordContext, and the current resource from ResourceContext, so in general it doesn’t need any property. You can use it anywhere you would use a regular <DeleteButton>, for example in a <Show> view:

import { Show } from 'react-admin';
import { SoftDeleteButton } from '@react-admin/ra-soft-delete';

const CommentShow = () => (
    <Show>
        {/* ... */}
        <SoftDeleteButton />
    </Show>
);

When pressed, it will call dataProvider.softDelete() with the current record’s id.

You can also specify a record and a resource:

<SoftDeleteButton record={{ id: 123, author: 'John Doe' }} resource="comments" />

Props

Prop Required Type Default Description
className Optional string - Class name to customize the look and feel of the button element itself
label Optional string - label or translation message to use
icon Optional ReactElement <DeleteIcon> iconElement, e.g. <CommentIcon />
mutationMode Optional string 'undoable' Mutation mode ('undoable', 'pessimistic' or 'optimistic')
mutation Options Optional   null options for react-query useMutation hook
record Optional Object - Record to soft delete, e.g. { id: 12, foo: 'bar' }
redirect Optional string, false or function ‘list’ Custom redirection after success side effect
resource Optional string - Resource to soft delete, e.g. ‘posts’
sx Optional SxProps - The custom styling for the button
success Message Optional string ‘Element deleted’ Lets you customize the success notification message.

label

By default, the label is Archive in English. In other languages, it’s the translation of the 'ra-soft-delete.action.soft_delete' key.

You can customize this label by providing a resource specific translation with the key resources.RESOURCE.action.soft_delete (e.g. resources.posts.action.soft_delete):

// in src/i18n/en.ts
import englishMessages from 'ra-language-english';

export const en = {
    ...englishMessages,
    resources: {
        posts: {
            name: 'Post |||| Posts',
            action: {
                soft_delete: 'Archive %{recordRepresentation}'
            }
        },
    },
    // ...
};

You can also customize this label by specifying a custom label prop:

<SoftDeleteButton label="Delete this comment" />

Custom labels are automatically translated, so you can use a translation key, too:

<SoftDeleteButton label="resources.comments.actions.soft_delete" />

icon

Customize the icon of the button by passing an icon prop:

import AutoDeleteIcon from '@mui/icons-material/AutoDelete';

<SoftDeleteButton icon={<AutoDeleteIcon />} />

mutationMode

<SoftDeleteButton> has three modes, depending on the mutationMode prop:

  • 'undoable' (default): Clicking the button will update the UI optimistically and display a confirmation snackbar with an undo button. If the user clicks the undo button, the record will not be soft-deleted and the UI will be rolled back. Otherwise, the record will be soft-deleted after 5 seconds.
  • optimistic: Clicking the button will update the UI optimistically and soft-delete the record. If the soft-deletion fails, the UI will be rolled back.
  • pessimistic: Clicking the button will display a confirmation dialog. If the user confirms, the record will be soft-deleted. If the user cancels, nothing will happen.

Note: When choosing the pessimistic mode, <SoftDeleteButton> will actually render a <SoftDeleteWithConfirmButton> component and accept additional props to customize the confirm dialog (see below).

mutationOptions

<SoftDeleteButton> calls the useMutation hook internally to soft-delete the record. You can pass options to this hook using the mutationOptions prop.

<SoftDeleteButton mutationOptions={{ onError: () => alert('Record not deleted, please retry') }} />

Check out the useMutation documentation for more information on the available options.

record

By default, <SoftDeleteButton> reads the current record from the RecordContext. If you want to delete a different record, you can pass it as a prop:

<SoftDeleteButton record={{ id: 123, author: 'John Doe' }} />

redirect

By default, <SoftDeleteButton> redirects to the list page after a successful deletion. You can customize the redirection by passing a path as the redirect prop:

<SoftDeleteButton redirect="/comments" />

resource

By default, <SoftDeleteButton> reads the current resource from the ResourceContext. If you want to delete a record from a different resource, you can pass it as a prop:

<SoftDeleteButton record={{ id: 123, author: 'John Doe' }} resource="comments" />

successMessage

On success, <SoftDeleteButton> displays a “Element deleted” notification in English. <SoftDeleteButton> uses two successive translation keys to build the success message:

  • resources.{resource}.notifications.soft_deleted as a first choice
  • ra-soft-delete.notification.soft_deleted as a fallback

To customize the notification message, you can set custom translation for these keys in your i18nProvider.

Tip: If you choose to use a custom translation, be aware that react-admin uses the same translation message for the <SoftDeleteButton> and <BulkSoftDeleteButton>, so the message must support pluralization:

const englishMessages = {
    resources: {
        comments: {
            notifications: {
                soft_deleted: 'Comment archived |||| %{smart_count} comments archived',
                // ...
            },
        },
    },
};

Alternately, pass a successMessage prop:

<SoftDeleteButton successMessage="Comment deleted successfully" />

Access Control

If your authProvider implements Access Control, <SoftDeleteButton> will only render if the user has the soft_delete access to the related resource.

This means <SoftDeleteButton> calls authProvider.canAccess() using the following parameters:

{ action: "soft_delete", resource: [current resource], record: [current record] }