<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.
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 choicera-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] }