diff --git a/docs/Buttons.md b/docs/Buttons.md
index 8542a78db90..416e93d8c8b 100644
--- a/docs/Buttons.md
+++ b/docs/Buttons.md
@@ -325,6 +325,31 @@ It's worth noting that removing the ripple will cause accessibility issues, incl
 
 Note: The `disableRipple` was set to `true` in React Admin for a time, but was reimplemented due to accessibility concerns. If you'd like to reimplement the static ripple colour effect, you can use the [React Admin's previous implementation](https://github.com/marmelab/react-admin/blob/994079cbca810a2e74d85329e684811645b04ae2/packages/ra-ui-materialui/src/defaultTheme.ts#L31) as a starting point. [The Material UI docs](https://mui.com/material-ui/api/button-base/#props) also gives details on how to reimplement focus styles using the `Mui-focusVisible` class.
 
+### `<UpdateButton>`
+
+This component allows to create a button that updates a record by calling the [`useUpdate hook`](./useUpdate.md).
+
+```jsx
+import { Edit, SimpleForm, TextInput, TopToolbar, UpdateButton } from 'react-admin';
+
+const PostEditActions = () => (
+    <TopToolbar>
+        <UpdateButton label="Reset views" data={{ views: 0 }} />
+    </TopToolbar>
+);
+
+export const PostEdit = () => (
+    <Edit actions={<PostEditActions>}>
+        <SimpleForm>
+            <TextInput source="title" />
+            <TextInput source="body" />
+        </SimpleForm>
+    </Edit>
+);
+```
+
+See [its documentation](./UpdateButton.md) for more details.
+
 ## Miscellaneous
 
 ### `<Button>`
diff --git a/docs/Edit.md b/docs/Edit.md
index 431a1acd6b1..aff57e10986 100644
--- a/docs/Edit.md
+++ b/docs/Edit.md
@@ -316,7 +316,7 @@ The default `onSuccess` function is:
 
 ```js
 () => {
-    notify('ra.notification.created', {
+    notify('ra.notification.updated', {
         messageArgs: { smart_count: 1 },
         undoable: mutationMode === 'undoable'
     });
@@ -384,7 +384,7 @@ const PostEdit = () => {
 ```
 {% endraw %}
 
-The `onError` function receives the error from the `dataProvider.edit()` call. It is a JavaScript Error object (see [the dataProvider documentation for details](./DataProviderWriting.md#error-format)).
+The `onError` function receives the error from the `dataProvider.update()` call. It is a JavaScript Error object (see [the dataProvider documentation for details](./DataProviderWriting.md#error-format)).
 
 The default `onError` function is:
 
diff --git a/docs/Reference.md b/docs/Reference.md
index 2df31771fd8..3378dfa8be8 100644
--- a/docs/Reference.md
+++ b/docs/Reference.md
@@ -189,6 +189,7 @@ title: "Index"
 * [`<Toolbar>`](./Toolbar.md)
 
 **- U -**
+* [`<UpdateButton>`](./UpdateButton.md)
 * [`<UrlField>`](./UrlField.md)
 * [`<UserMenu>`](./AppBar.md#usermenu)
 
diff --git a/docs/UpdateButton.md b/docs/UpdateButton.md
new file mode 100644
index 00000000000..74a6f9992cf
--- /dev/null
+++ b/docs/UpdateButton.md
@@ -0,0 +1,303 @@
+---
+layout: default
+title: "The UpdateButton Component"
+---
+
+# `<UpdateButton>`
+
+This component allows to create a button that updates a record by calling the [`useUpdate hook`](./useUpdate.md).
+
+<video controls playsinline muted loop poster="./img/updatebutton.png" >
+  <source src="./img/updatebutton.webm" type="video/webm" />
+  <source src="./img/updatebutton.mp4" type="video/mp4" />
+  Your browser does not support the video tag.
+</video>
+
+## Usage
+
+Use `<UpdateButton>` inside the actions toolbar of the [`Edit`](./Edit.md#actions) or [`Show`](./Show.md#actions) views.
+
+```jsx
+import { Edit, SimpleForm, TextInput, TopToolbar, UpdateButton } from 'react-admin';
+
+const PostEditActions = () => (
+    <TopToolbar>
+        <UpdateButton label="Reset views" data={{ views: 0 }} />
+    </TopToolbar>
+);
+
+export const PostEdit = () => (
+    <Edit actions={<PostEditActions>}>
+        <SimpleForm>
+            <TextInput source="title" />
+            <TextInput source="body" />
+        </SimpleForm>
+    </Edit>
+);
+```
+
+## Props
+
+`<UpdateButton>` accepts the following props:
+
+| Prop             | Required | Type        | Default    | Description                                              |
+| ---------------- | -------- | ----------- | ---------- | -------------------------------------------------------- |
+| `data`           | Required | `object`    |            | The data used to update the record                       |
+| `mutationMode`   | Optional | `string`    | `undoable` | Mutation mode (`'undoable'`, `'pessimistic'` or `'optimistic'`) |
+| `confirmTitle`   | Optional | `ReactNode` | `ra.message.bulk_update_title` | The title of the confirmation dialog when `mutationMode` is not `undoable` |
+| `confirmContent` | Optional | `ReactNode` | `ra.message.bulk_update_content` | The content of the confirmation dialog when `mutationMode` is not `undoable` |
+| `mutationOptions` | Optional | `Object`  |        | The react-query mutation options |
+
+`<UpdateButton>` also accepts the [Button props](./Buttons.md#button).
+
+## `data`
+
+The data used to update the record. Passed to the `dataProvider.update` method. This prop is required.
+
+{% raw %}
+```tsx
+import { TopToolbar, UpdateButton } from 'react-admin';
+
+const PostEditActions = () => (
+    <TopToolbar>
+        <UpdateButton label="Reset views" data={{ views: 0 }} />
+    </TopToolbar>
+);
+```
+{% endraw %}
+
+## `mutationMode`
+
+The mutation mode determines when the side effects (redirection, notifications, etc.) are executed:
+
+- `pessimistic`: The mutation is passed to the dataProvider first. When the dataProvider returns successfully, the mutation is applied locally, and the side effects are executed. 
+- `optimistic`: The mutation is applied locally and the side effects are executed immediately. Then the mutation is passed to the dataProvider. If the dataProvider returns successfully, nothing happens (as the mutation was already applied locally). If the dataProvider returns in error, the page is refreshed and an error notification is shown. 
+- `undoable` (default): The mutation is applied locally and the side effects are executed immediately. Then a notification is shown with an undo button. If the user clicks on undo, the mutation is never sent to the dataProvider, and the page is refreshed. Otherwise, after a 5 seconds delay, the mutation is passed to the dataProvider. If the dataProvider returns successfully, nothing happens (as the mutation was already applied locally). If the dataProvider returns in error, the page is refreshed and an error notification is shown.
+
+By default, the `<UpdateButton>` uses the `undoable` mutation mode. This is part of the "optimistic rendering" strategy of react-admin ; it makes user interactions more reactive. 
+
+You can change this default by setting the `mutationMode` prop. For instance, to remove the ability to undo the changes, use the `optimistic` mode:
+
+{% raw %}
+```jsx
+import { TopToolbar, UpdateButton } from 'react-admin';
+
+const PostEditActions = () => (
+    <TopToolbar>
+        <UpdateButton label="Reset views" data={{ views: 0 }} mutationMode="optimistic" />
+    </TopToolbar>
+);
+```
+{% endraw %}
+
+And to make the action blocking, and wait for the dataProvider response to continue, use the `pessimistic` mode:
+
+{% raw %}
+```jsx
+import { TopToolbar, UpdateButton } from 'react-admin';
+
+const PostEditActions = () => (
+    <TopToolbar>
+        <UpdateButton label="Reset views" data={{ views: 0 }} mutationMode="pessimistic" />
+    </TopToolbar>
+);
+```
+{% endraw %}
+
+
+**Tip**: When using any other mode than `undoable`, the `<UpdateButton>` displays a confirmation dialog before calling the dataProvider. 
+
+## `confirmTitle`
+
+Only used when `mutationMode` is either `optimistic` or `pessimistic` to change the confirmation dialog title:
+
+{% raw %}
+```jsx
+import { TopToolbar, UpdateButton } from 'react-admin';
+
+const PostEditActions = () => (
+    <TopToolbar>
+        <UpdateButton
+            label="Reset views"
+            data={{ views: 0 }}
+            mutationMode="optimistic"
+            confirmTitle="Reset views"
+        />
+    </TopToolbar>
+);
+```
+{% endraw %}
+
+## `confirmContent`
+
+Only used when `mutationMode` is either `optimistic` or `pessimistic` to change the confirmation dialog content:
+
+{% raw %}
+```jsx
+import { TopToolbar, UpdateButton } from 'react-admin';
+
+const PostEditActions = () => (
+    <TopToolbar>
+        <UpdateButton
+            label="Reset views"
+            data={{ views: 0 }}
+            mutationMode="optimistic"
+            confirmContent="Do you really want to reset the views?"
+        />
+    </TopToolbar>
+);
+```
+{% endraw %}
+
+## `mutationOptions`
+
+`<UpdateButton>` calls `dataProvider.update()` via react-query's `useMutation` hook. You can customize the options you pass to this hook, e.g. to pass [a custom `meta`](./Actions.md#meta-parameter) to the `dataProvider.update()` call.
+
+{% raw %}
+```jsx
+import { TopToolbar, UpdateButton } from 'react-admin';
+
+const PostEditActions = () => (
+    <TopToolbar>
+        <UpdateButton
+            label="Reset views"
+            data={{ views: 0 }}
+            mutationOptions={{ meta: { foo: 'bar' } }}
+        />
+    </TopToolbar>
+);
+```
+{% endraw %}
+
+You can also use `mutationOptions` to override success or error side effects, by setting the `mutationOptions` prop. Refer to the [useMutation documentation](https://tanstack.com/query/v3/docs/react/reference/useMutation) in the react-query website for a list of the possible options.
+
+Let's see an example with the success side effect. By default, when the action succeeds, react-admin shows a notification, and refreshes the view. You can override this behavior and pass custom success side effects by providing a `mutationOptions` prop with an `onSuccess` key:
+
+{% raw %}
+```jsx
+import * as React from 'react';
+import { useNotify, useRefresh, useRedirect, TopToolbar, UpdateButton } from 'react-admin';
+
+const PostEditActions = () => {
+    const notify = useNotify();
+    const refresh = useRefresh();
+    const redirect = useRedirect();
+
+    const onSuccess = () => {
+        notify(`Changes saved`);
+        redirect('/posts');
+        refresh();
+    };
+
+    return (
+        <TopToolbar>
+            <UpdateButton
+                label="Reset views"
+                data={{ views: 0 }}
+                mutationOptions={{ onSuccess }}
+            />
+        </TopToolbar>
+    );
+}
+```
+{% endraw %}
+
+The default `onSuccess` function is:
+
+```js
+() => {
+    notify('ra.notification.updated', {
+        messageArgs: { smart_count: 1 },
+        undoable: mutationMode === 'undoable'
+    });
+    refresh();
+}
+```
+
+**Tip**: When you use `mutationMode="pessimistic"`, the `onSuccess` function receives the response from the `dataProvider.update()` call, which is the edited record (see [the dataProvider documentation for details](./DataProviderWriting.md#response-format)). You can use that response in the success side effects: 
+
+{% raw %}
+```jsx
+import * as React from 'react';
+import { useNotify, useRefresh, useRedirect, TopToolbar, UpdateButton } from 'react-admin';
+
+const PostEditActions = () => {
+    const notify = useNotify();
+    const refresh = useRefresh();
+    const redirect = useRedirect();
+
+    const onSuccess = (data) => {
+        notify(`Changes to post "${data.title}" saved`);
+        redirect('/posts');
+        refresh();
+    };
+
+    return (
+        <TopToolbar>
+            <UpdateButton
+                label="Reset views"
+                data={{ views: 0 }}
+                mutationOptions={{ onSuccess }}
+            />
+        </TopToolbar>
+    );
+}
+```
+{% endraw %}
+
+Similarly, you can override the failure side effects with an `onError` option. By default, when the save action fails at the dataProvider level, react-admin shows a notification error.
+
+{% raw %}
+```jsx
+import * as React from 'react';
+import { useNotify, useRefresh, useRedirect, TopToolbar, UpdateButton } from 'react-admin';
+
+const PostEditActions = () => {
+    const notify = useNotify();
+    const refresh = useRefresh();
+    const redirect = useRedirect();
+
+    const onError = (error) => {
+        notify(`Could not edit post: ${error.message}`);
+        redirect('/posts');
+        refresh();
+    };
+
+    return (
+        <TopToolbar>
+            <UpdateButton
+                label="Reset views"
+                data={{ views: 0 }}
+                mutationOptions={{ onError }}
+            />
+        </TopToolbar>
+    );
+}
+```
+{% endraw %}
+
+The `onError` function receives the error from the `dataProvider.update()` call. It is a JavaScript Error object (see [the dataProvider documentation for details](./DataProviderWriting.md#error-format)).
+
+The default `onError` function is:
+
+```jsx
+(error) => {
+    notify(typeof error === 'string' ? error : error.message || 'ra.notification.http_error', { type: 'error' });
+}
+```
+
+## `sx`
+
+The sx prop lets you style the component and its children using Material-ui's [sx syntax](https://mui.com/system/the-sx-prop/).
+
+{% raw %}
+```jsx
+import { TopToolbar, UpdateButton } from 'react-admin';
+
+const PostEditActions = () => (
+    <TopToolbar>
+        <UpdateButton label="Reset views" data={{ views: 0 }} sx={{ width: 500 }} />
+    </TopToolbar>
+);
+```
+{% endraw %}
diff --git a/docs/img/updatebutton.mp4 b/docs/img/updatebutton.mp4
new file mode 100644
index 00000000000..eb74dfb519b
Binary files /dev/null and b/docs/img/updatebutton.mp4 differ
diff --git a/docs/img/updatebutton.png b/docs/img/updatebutton.png
new file mode 100644
index 00000000000..add9fa9f05d
Binary files /dev/null and b/docs/img/updatebutton.png differ
diff --git a/docs/img/updatebutton.webm b/docs/img/updatebutton.webm
new file mode 100644
index 00000000000..11f69e8152f
Binary files /dev/null and b/docs/img/updatebutton.webm differ
diff --git a/docs/navigation.html b/docs/navigation.html
index aaf57a00f91..8ff5e4af250 100644
--- a/docs/navigation.html
+++ b/docs/navigation.html
@@ -242,6 +242,7 @@
   <li {% if page.path == 'Search.md' %} class="active" {% endif %}><a class="nav-link" href="./Search.html"><code>&lt;Search&gt;</code><img class="premium" src="./img/premium.svg" /></a></li>
   <li {% if page.path == 'Confirm.md' %} class="active" {% endif %}><a class="nav-link" href="./Confirm.html"><code>&lt;Confirm&gt;</code></a></li>
   <li {% if page.path == 'Buttons.md' %} class="active" {% endif %}><a class="nav-link" href="./Buttons.html">Buttons</a></li>
+  <li {% if page.path == 'UpdateButton.md' %} class="active" {% endif %}><a class="nav-link" href="./UpdateButton.html"><code>&lt;UpdateButton&gt;</code></a></li>
 </ul>
 
 <ul><div>Realtime</div>
diff --git a/packages/ra-ui-materialui/src/button/UpdateButton.stories.tsx b/packages/ra-ui-materialui/src/button/UpdateButton.stories.tsx
new file mode 100644
index 00000000000..5f4623062ee
--- /dev/null
+++ b/packages/ra-ui-materialui/src/button/UpdateButton.stories.tsx
@@ -0,0 +1,238 @@
+import * as React from 'react';
+import polyglotI18nProvider from 'ra-i18n-polyglot';
+import englishMessages from 'ra-language-english';
+import frenchMessages from 'ra-language-french';
+import { Resource, withLifecycleCallbacks } from 'ra-core';
+import fakeRestDataProvider from 'ra-data-fakerest';
+import { createMemoryHistory } from 'history';
+
+import { UpdateButton } from './UpdateButton';
+import { AdminContext } from '../AdminContext';
+import { AdminUI } from '../AdminUI';
+import { NumberField, TextField } from '../field';
+import { Show, SimpleShowLayout } from '../detail';
+import { TopToolbar } from '../layout';
+
+export default { title: 'ra-ui-materialui/button/UpdateButton' };
+
+const i18nProvider = polyglotI18nProvider(
+    locale =>
+        locale === 'fr'
+            ? {
+                  ...frenchMessages,
+                  resources: {
+                      books: {
+                          name: 'Livre |||| Livres',
+                          fields: {
+                              id: 'Id',
+                              title: 'Titre',
+                              author: 'Auteur',
+                              year: 'Année',
+                          },
+                      },
+                  },
+              }
+            : englishMessages,
+    'en' // Default locale
+);
+
+const getDataProvider = () =>
+    withLifecycleCallbacks(
+        fakeRestDataProvider({
+            posts: [
+                {
+                    id: 1,
+                    title: 'Lorem Ipsum',
+                    body: 'Lorem ipsum dolor sit amet',
+                    views: 1000,
+                },
+            ],
+            authors: [],
+        }),
+        [
+            {
+                resource: 'posts',
+                beforeUpdate: async params => {
+                    await new Promise(resolve => setTimeout(resolve, 1000));
+                    return params;
+                },
+            },
+        ]
+    );
+
+const PostShow = () => {
+    return (
+        <Show
+            actions={
+                <TopToolbar>
+                    <UpdateButton label="Reset views" data={{ views: 0 }} />
+                </TopToolbar>
+            }
+        >
+            <SimpleShowLayout>
+                <TextField source="id" />
+                <TextField source="title" />
+                <TextField source="body" />
+                <NumberField source="views" />
+            </SimpleShowLayout>
+        </Show>
+    );
+};
+
+export const Undoable = () => (
+    <AdminContext
+        dataProvider={getDataProvider()}
+        i18nProvider={i18nProvider}
+        history={createMemoryHistory({ initialEntries: ['/posts/1/show'] })}
+    >
+        <AdminUI>
+            <Resource name="posts" show={<PostShow />} />
+        </AdminUI>
+    </AdminContext>
+);
+
+const PostShowPessimistic = () => {
+    return (
+        <Show
+            actions={
+                <TopToolbar>
+                    <UpdateButton
+                        mutationMode="pessimistic"
+                        label="Reset views"
+                        data={{ views: 0 }}
+                    />
+                </TopToolbar>
+            }
+        >
+            <SimpleShowLayout>
+                <TextField source="id" />
+                <TextField source="title" />
+                <TextField source="body" />
+                <NumberField source="views" />
+            </SimpleShowLayout>
+        </Show>
+    );
+};
+
+export const Pessimistic = () => (
+    <AdminContext
+        dataProvider={getDataProvider()}
+        i18nProvider={i18nProvider}
+        history={createMemoryHistory({ initialEntries: ['/posts/1/show'] })}
+    >
+        <AdminUI>
+            <Resource name="posts" show={<PostShowPessimistic />} />
+        </AdminUI>
+    </AdminContext>
+);
+
+const PostShowOptimistic = () => {
+    return (
+        <Show
+            actions={
+                <TopToolbar>
+                    <UpdateButton
+                        mutationMode="optimistic"
+                        label="Reset views"
+                        data={{ views: 0 }}
+                    />
+                </TopToolbar>
+            }
+        >
+            <SimpleShowLayout>
+                <TextField source="id" />
+                <TextField source="title" />
+                <TextField source="body" />
+                <NumberField source="views" />
+            </SimpleShowLayout>
+        </Show>
+    );
+};
+
+export const Optimistic = () => (
+    <AdminContext
+        dataProvider={getDataProvider()}
+        i18nProvider={i18nProvider}
+        history={createMemoryHistory({ initialEntries: ['/posts/1/show'] })}
+    >
+        <AdminUI>
+            <Resource name="posts" show={<PostShowOptimistic />} />
+        </AdminUI>
+    </AdminContext>
+);
+
+const PostShowSx = () => {
+    return (
+        <Show
+            actions={
+                <TopToolbar>
+                    <UpdateButton
+                        sx={{ border: '1px solid red' }}
+                        label="Reset views"
+                        data={{ views: 0 }}
+                    />
+                </TopToolbar>
+            }
+        >
+            <SimpleShowLayout>
+                <TextField source="id" />
+                <TextField source="title" />
+                <TextField source="body" />
+                <NumberField source="views" />
+            </SimpleShowLayout>
+        </Show>
+    );
+};
+
+export const Sx = () => (
+    <AdminContext
+        dataProvider={getDataProvider()}
+        i18nProvider={i18nProvider}
+        history={createMemoryHistory({ initialEntries: ['/posts/1/show'] })}
+    >
+        <AdminUI>
+            <Resource name="posts" show={<PostShowSx />} />
+        </AdminUI>
+    </AdminContext>
+);
+
+const PostShowSideEffects = () => {
+    const onSuccess = () => {
+        alert('onSuccess');
+    };
+    const onError = () => {
+        alert('onError');
+    };
+    return (
+        <Show
+            actions={
+                <TopToolbar>
+                    <UpdateButton
+                        mutationOptions={{ onSuccess, onError }}
+                        label="Reset views"
+                        data={{ views: 0 }}
+                    />
+                </TopToolbar>
+            }
+        >
+            <SimpleShowLayout>
+                <TextField source="id" />
+                <TextField source="title" />
+                <TextField source="body" />
+                <NumberField source="views" />
+            </SimpleShowLayout>
+        </Show>
+    );
+};
+
+export const SideEffects = () => (
+    <AdminContext
+        dataProvider={getDataProvider()}
+        i18nProvider={i18nProvider}
+        history={createMemoryHistory({ initialEntries: ['/posts/1/show'] })}
+    >
+        <AdminUI>
+            <Resource name="posts" show={<PostShowSideEffects />} />
+        </AdminUI>
+    </AdminContext>
+);
diff --git a/packages/ra-ui-materialui/src/button/UpdateButton.tsx b/packages/ra-ui-materialui/src/button/UpdateButton.tsx
new file mode 100644
index 00000000000..0a01ed08526
--- /dev/null
+++ b/packages/ra-ui-materialui/src/button/UpdateButton.tsx
@@ -0,0 +1,57 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import {
+    UpdateWithConfirmButton,
+    UpdateWithConfirmButtonProps,
+} from './UpdateWithConfirmButton';
+import {
+    UpdateWithUndoButton,
+    UpdateWithUndoButtonProps,
+} from './UpdateWithUndoButton';
+
+/**
+ * Updates the selected rows.
+ *
+ * To be used inside the <Edit actions> prop or <Show actions> prop.
+ *
+ * @example // basic usage
+ * import * as React from 'react';
+ * import { Edit, TopToolbar, UpdateButton } from 'react-admin';
+ *
+ * const PostEditActions = () => (
+ *     <TopToolbar>
+ *         <UpdateButton label="Reset Views" data={{ views: 0 }} />
+ *     </TopToolbar>
+ * );
+ *
+ * export const PostEdit = () => (
+ *     <Edit actions={<PostEditActions />}>
+ *         ...
+ *     </Edit>
+ * );
+ */
+export const UpdateButton = (props: UpdateButtonProps) => {
+    const { mutationMode = 'undoable', ...rest } = props;
+
+    return mutationMode === 'undoable' ? (
+        <UpdateWithUndoButton {...rest} />
+    ) : (
+        <UpdateWithConfirmButton mutationMode={mutationMode} {...rest} />
+    );
+};
+
+export type UpdateButtonProps =
+    | ({
+          mutationMode?: 'undoable';
+      } & UpdateWithUndoButtonProps)
+    | ({
+          mutationMode?: 'pessimistic' | 'optimistic';
+      } & UpdateWithConfirmButtonProps);
+
+UpdateButton.propTypes = {
+    label: PropTypes.string,
+    resource: PropTypes.string,
+    selectedIds: PropTypes.arrayOf(PropTypes.any),
+    mutationMode: PropTypes.oneOf(['pessimistic', 'optimistic', 'undoable']),
+    icon: PropTypes.element,
+};
diff --git a/packages/ra-ui-materialui/src/button/UpdateWithConfirmButton.spec.tsx b/packages/ra-ui-materialui/src/button/UpdateWithConfirmButton.spec.tsx
new file mode 100644
index 00000000000..d7cb38c3558
--- /dev/null
+++ b/packages/ra-ui-materialui/src/button/UpdateWithConfirmButton.spec.tsx
@@ -0,0 +1,245 @@
+import * as React from 'react';
+import { screen, render, waitFor, fireEvent } from '@testing-library/react';
+import expect from 'expect';
+import { CoreAdminContext, MutationMode, testDataProvider } from 'ra-core';
+import { createTheme, ThemeProvider } from '@mui/material/styles';
+
+import { UpdateWithConfirmButton } from './UpdateWithConfirmButton';
+import { Toolbar, SimpleForm } from '../form';
+import { Edit } from '../detail';
+import { TextInput } from '../input';
+import { Notification } from '../layout';
+
+const theme = createTheme();
+
+const invalidButtonDomProps = {
+    record: { id: 123, foo: 'bar' },
+    redirect: 'list',
+    resource: 'posts',
+    mutationMode: 'pessimistic' as MutationMode,
+};
+
+describe('<UpdateWithConfirmButton />', () => {
+    it('should render a button with no DOM errors', () => {
+        const spy = jest.spyOn(console, 'error').mockImplementation(() => {});
+
+        render(
+            <CoreAdminContext dataProvider={testDataProvider()}>
+                <ThemeProvider theme={theme}>
+                    <UpdateWithConfirmButton
+                        data={{}}
+                        {...invalidButtonDomProps}
+                    />
+                </ThemeProvider>
+            </CoreAdminContext>
+        );
+
+        expect(spy).not.toHaveBeenCalled();
+        expect(
+            screen.getByLabelText('ra.action.update').getAttribute('type')
+        ).toEqual('button');
+
+        spy.mockRestore();
+    });
+
+    const defaultEditProps = {
+        id: '123',
+        resource: 'posts',
+        location: {},
+        match: {},
+        mutationMode: 'pessimistic' as MutationMode,
+    };
+
+    it('should allow to override the resource', async () => {
+        const dataProvider = testDataProvider({
+            // @ts-ignore
+            getOne: () =>
+                Promise.resolve({
+                    data: { id: 123, title: 'lorem', views: 1000 },
+                }),
+            update: jest.fn().mockResolvedValueOnce({ data: { id: 123 } }),
+        });
+        const EditToolbar = props => (
+            <Toolbar {...props}>
+                <UpdateWithConfirmButton
+                    resource="comments"
+                    data={{ views: 0 }}
+                />
+            </Toolbar>
+        );
+        render(
+            <ThemeProvider theme={theme}>
+                <CoreAdminContext dataProvider={dataProvider}>
+                    <Edit {...defaultEditProps}>
+                        <SimpleForm toolbar={<EditToolbar />}>
+                            <TextInput source="title" />
+                        </SimpleForm>
+                    </Edit>
+                </CoreAdminContext>
+            </ThemeProvider>
+        );
+        // waitFor for the dataProvider.getOne() return
+        await waitFor(() => {
+            expect(screen.queryByDisplayValue('lorem')).not.toBeNull();
+        });
+        fireEvent.click(screen.getByLabelText('ra.action.update'));
+        fireEvent.click(screen.getByText('ra.action.confirm'));
+        await waitFor(() => {
+            expect(dataProvider.update).toHaveBeenCalledWith('comments', {
+                id: 123,
+                data: { views: 0 },
+                previousData: { id: 123, title: 'lorem', views: 1000 },
+                meta: undefined,
+            });
+        });
+    });
+
+    it('should allow to undo the update after confirmation if mutationMode is undoable', async () => {
+        const dataProvider = testDataProvider({
+            // @ts-ignore
+            getOne: () =>
+                Promise.resolve({
+                    data: { id: 123, title: 'lorem', views: 1000 },
+                }),
+            update: jest.fn().mockResolvedValueOnce({ data: { id: 123 } }),
+        });
+        const EditToolbar = props => (
+            <Toolbar {...props}>
+                <UpdateWithConfirmButton
+                    data={{ views: 0 }}
+                    mutationMode="undoable"
+                />
+            </Toolbar>
+        );
+        render(
+            <ThemeProvider theme={theme}>
+                <CoreAdminContext dataProvider={dataProvider}>
+                    <>
+                        <Edit {...defaultEditProps}>
+                            <SimpleForm toolbar={<EditToolbar />}>
+                                <TextInput source="title" />
+                            </SimpleForm>
+                        </Edit>
+                        <Notification />
+                    </>
+                </CoreAdminContext>
+            </ThemeProvider>
+        );
+        // waitFor for the dataProvider.getOne() return
+        await waitFor(() => {
+            expect(screen.queryByDisplayValue('lorem')).not.toBeNull();
+        });
+        fireEvent.click(screen.getByLabelText('ra.action.update'));
+        fireEvent.click(screen.getByText('ra.action.confirm'));
+
+        await waitFor(() => {
+            expect(
+                screen.queryByText('ra.notification.updated')
+            ).not.toBeNull();
+        });
+        expect(screen.queryByText('ra.action.undo')).not.toBeNull();
+    });
+
+    it('should allow to override the success side effects', async () => {
+        const dataProvider = testDataProvider({
+            // @ts-ignore
+            getOne: () =>
+                Promise.resolve({
+                    data: { id: 123, title: 'lorem', views: 1000 },
+                }),
+            update: jest.fn().mockResolvedValueOnce({ data: { id: 123 } }),
+        });
+        const onSuccess = jest.fn();
+        const EditToolbar = props => (
+            <Toolbar {...props}>
+                <UpdateWithConfirmButton
+                    data={{ views: 0 }}
+                    mutationOptions={{ onSuccess }}
+                />
+            </Toolbar>
+        );
+        render(
+            <ThemeProvider theme={theme}>
+                <CoreAdminContext dataProvider={dataProvider}>
+                    <Edit {...defaultEditProps}>
+                        <SimpleForm toolbar={<EditToolbar />}>
+                            <TextInput source="title" />
+                        </SimpleForm>
+                    </Edit>
+                </CoreAdminContext>
+            </ThemeProvider>
+        );
+        // waitFor for the dataProvider.getOne() return
+        await waitFor(() => {
+            expect(screen.queryByDisplayValue('lorem')).not.toBeNull();
+        });
+        fireEvent.click(screen.getByLabelText('ra.action.update'));
+        fireEvent.click(screen.getByText('ra.action.confirm'));
+        await waitFor(() => {
+            expect(dataProvider.update).toHaveBeenCalled();
+            expect(onSuccess).toHaveBeenCalledWith(
+                { id: 123 },
+                {
+                    id: 123,
+                    data: { views: 0 },
+                    previousData: { id: 123, title: 'lorem', views: 1000 },
+                    meta: undefined,
+                    resource: 'posts',
+                },
+                { snapshot: expect.any(Array) }
+            );
+        });
+    });
+
+    it('should allow to override the error side effects', async () => {
+        jest.spyOn(console, 'error').mockImplementation(() => {});
+        const dataProvider = testDataProvider({
+            // @ts-ignore
+            getOne: () =>
+                Promise.resolve({
+                    data: { id: 123, title: 'lorem', views: 1000 },
+                }),
+            update: jest.fn().mockRejectedValueOnce(new Error('not good')),
+        });
+        const onError = jest.fn();
+        const EditToolbar = props => (
+            <Toolbar {...props}>
+                <UpdateWithConfirmButton
+                    data={{ views: 0 }}
+                    mutationOptions={{ onError }}
+                />
+            </Toolbar>
+        );
+        render(
+            <ThemeProvider theme={theme}>
+                <CoreAdminContext dataProvider={dataProvider}>
+                    <Edit {...defaultEditProps}>
+                        <SimpleForm toolbar={<EditToolbar />}>
+                            <TextInput source="title" />
+                        </SimpleForm>
+                    </Edit>
+                </CoreAdminContext>
+            </ThemeProvider>
+        );
+        // waitFor for the dataProvider.getOne() return
+        await waitFor(() => {
+            expect(screen.queryByDisplayValue('lorem')).toBeDefined();
+        });
+        fireEvent.click(screen.getByLabelText('ra.action.update'));
+        fireEvent.click(screen.getByText('ra.action.confirm'));
+        await waitFor(() => {
+            expect(dataProvider.update).toHaveBeenCalled();
+            expect(onError).toHaveBeenCalledWith(
+                new Error('not good'),
+                {
+                    id: 123,
+                    data: { views: 0 },
+                    previousData: { id: 123, title: 'lorem', views: 1000 },
+                    meta: undefined,
+                    resource: 'posts',
+                },
+                { snapshot: expect.any(Array) }
+            );
+        });
+    });
+});
diff --git a/packages/ra-ui-materialui/src/button/UpdateWithConfirmButton.tsx b/packages/ra-ui-materialui/src/button/UpdateWithConfirmButton.tsx
new file mode 100644
index 00000000000..ea6145970ad
--- /dev/null
+++ b/packages/ra-ui-materialui/src/button/UpdateWithConfirmButton.tsx
@@ -0,0 +1,190 @@
+import * as React from 'react';
+import { Fragment, useState, ReactElement } from 'react';
+import PropTypes from 'prop-types';
+import ActionUpdate from '@mui/icons-material/Update';
+import inflection from 'inflection';
+import { alpha, styled } from '@mui/material/styles';
+import {
+    useTranslate,
+    useNotify,
+    useResourceContext,
+    MutationMode,
+    RaRecord,
+    useRecordContext,
+    useUpdate,
+    UpdateParams,
+} from 'ra-core';
+
+import { Confirm } from '../layout';
+import { Button, ButtonProps } from './Button';
+import { BulkActionProps } from '../types';
+import { UseMutationOptions } from 'react-query';
+
+export const UpdateWithConfirmButton = (
+    props: UpdateWithConfirmButtonProps
+) => {
+    const notify = useNotify();
+    const translate = useTranslate();
+    const resource = useResourceContext(props);
+    const [isOpen, setOpen] = useState(false);
+    const record = useRecordContext(props);
+
+    const {
+        confirmTitle = 'ra.message.bulk_update_title',
+        confirmContent = 'ra.message.bulk_update_content',
+        data,
+        icon = defaultIcon,
+        label = 'ra.action.update',
+        mutationMode = 'pessimistic',
+        onClick,
+        mutationOptions = {},
+        ...rest
+    } = props;
+    const {
+        meta: mutationMeta,
+        onSuccess = () => {
+            notify('ra.notification.updated', {
+                type: 'info',
+                messageArgs: { smart_count: 1 },
+                undoable: mutationMode === 'undoable',
+            });
+            setOpen(false);
+        },
+        onError = (error: Error | string) => {
+            notify(
+                typeof error === 'string'
+                    ? error
+                    : error.message || 'ra.notification.http_error',
+                {
+                    type: 'error',
+                    messageArgs: {
+                        _:
+                            typeof error === 'string'
+                                ? error
+                                : error && error.message
+                                ? error.message
+                                : undefined,
+                    },
+                }
+            );
+            setOpen(false);
+        },
+        ...otherMutationOptions
+    } = mutationOptions;
+
+    const [updateMany, { isLoading }] = useUpdate();
+
+    const handleClick = e => {
+        setOpen(true);
+        e.stopPropagation();
+    };
+
+    const handleDialogClose = () => {
+        setOpen(false);
+    };
+
+    const handleUpdate = e => {
+        updateMany(
+            resource,
+            { id: record.id, data, meta: mutationMeta, previousData: record },
+            {
+                onSuccess,
+                onError,
+                mutationMode,
+                ...otherMutationOptions,
+            }
+        );
+
+        if (typeof onClick === 'function') {
+            onClick(e);
+        }
+    };
+
+    return (
+        <Fragment>
+            <StyledButton
+                onClick={handleClick}
+                label={label}
+                {...sanitizeRestProps(rest)}
+            >
+                {icon}
+            </StyledButton>
+            <Confirm
+                isOpen={isOpen}
+                loading={isLoading}
+                title={confirmTitle}
+                content={confirmContent}
+                translateOptions={{
+                    smart_count: 1,
+                    name: translate(`resources.${resource}.forcedCaseName`, {
+                        smart_count: 1,
+                        _: inflection.humanize(
+                            translate(`resources.${resource}.name`, {
+                                smart_count: 1,
+                                _: inflection.inflect(resource, 1),
+                            }),
+                            true
+                        ),
+                    }),
+                }}
+                onConfirm={handleUpdate}
+                onClose={handleDialogClose}
+            />
+        </Fragment>
+    );
+};
+
+const sanitizeRestProps = ({
+    filterValues,
+    label,
+    ...rest
+}: Omit<
+    UpdateWithConfirmButtonProps,
+    'resource' | 'selectedIds' | 'icon' | 'data'
+>) => rest;
+
+export interface UpdateWithConfirmButtonProps<
+    RecordType extends RaRecord = any,
+    MutationOptionsError = unknown
+> extends BulkActionProps,
+        ButtonProps {
+    confirmContent?: React.ReactNode;
+    confirmTitle?: string;
+    icon?: ReactElement;
+    data: any;
+    mutationMode?: MutationMode;
+    mutationOptions?: UseMutationOptions<
+        RecordType,
+        MutationOptionsError,
+        UpdateParams<RecordType>
+    > & { meta?: any };
+}
+
+UpdateWithConfirmButton.propTypes = {
+    confirmTitle: PropTypes.string,
+    confirmContent: PropTypes.string,
+    label: PropTypes.string,
+    resource: PropTypes.string,
+    selectedIds: PropTypes.arrayOf(PropTypes.any),
+    icon: PropTypes.element,
+    data: PropTypes.any.isRequired,
+    mutationMode: PropTypes.oneOf(['pessimistic', 'optimistic', 'undoable']),
+};
+
+const PREFIX = 'RaUpdateWithConfirmButton';
+
+const StyledButton = styled(Button, {
+    name: PREFIX,
+    overridesResolver: (props, styles) => styles.root,
+})(({ theme }) => ({
+    color: theme.palette.primary.main,
+    '&:hover': {
+        backgroundColor: alpha(theme.palette.primary.main, 0.12),
+        // Reset on mouse devices
+        '@media (hover: none)': {
+            backgroundColor: 'transparent',
+        },
+    },
+}));
+
+const defaultIcon = <ActionUpdate />;
diff --git a/packages/ra-ui-materialui/src/button/UpdateWithUndoButton.spec.tsx b/packages/ra-ui-materialui/src/button/UpdateWithUndoButton.spec.tsx
new file mode 100644
index 00000000000..5b99e6b372d
--- /dev/null
+++ b/packages/ra-ui-materialui/src/button/UpdateWithUndoButton.spec.tsx
@@ -0,0 +1,105 @@
+import * as React from 'react';
+import { screen, render, waitFor, fireEvent } from '@testing-library/react';
+import expect from 'expect';
+import { MutationMode, CoreAdminContext, testDataProvider } from 'ra-core';
+import { createTheme, ThemeProvider } from '@mui/material/styles';
+
+import { Toolbar, SimpleForm } from '../form';
+import { Edit } from '../detail';
+import { TextInput } from '../input';
+import { UpdateWithUndoButton } from './UpdateWithUndoButton';
+
+const theme = createTheme();
+
+const invalidButtonDomProps = {
+    record: { id: 123, foo: 'bar' },
+    redirect: 'list',
+    resource: 'posts',
+};
+
+describe('<UpdateWithUndoButton />', () => {
+    it('should render a button with no DOM errors', () => {
+        const spy = jest.spyOn(console, 'error').mockImplementation(() => {});
+
+        render(
+            <CoreAdminContext dataProvider={testDataProvider()}>
+                <ThemeProvider theme={theme}>
+                    <UpdateWithUndoButton
+                        data={{}}
+                        {...invalidButtonDomProps}
+                    />
+                </ThemeProvider>
+            </CoreAdminContext>
+        );
+
+        expect(spy).not.toHaveBeenCalled();
+        expect(
+            screen.getByLabelText('ra.action.update').getAttribute('type')
+        ).toEqual('button');
+
+        spy.mockRestore();
+    });
+
+    const defaultEditProps = {
+        id: '123',
+        resource: 'posts',
+        location: {
+            pathname: '',
+            search: undefined,
+            state: undefined,
+            hash: undefined,
+        },
+        match: { isExact: true, path: '', url: '', params: undefined },
+        mutationMode: 'pessimistic' as MutationMode,
+    };
+
+    it('should allow to override the onSuccess side effects', async () => {
+        const dataProvider = testDataProvider({
+            // @ts-ignore
+            getOne: () =>
+                Promise.resolve({
+                    data: { id: 123, title: 'lorem', views: 1000 },
+                }),
+            // @ts-ignore
+            update: () => Promise.resolve({ data: { id: 123 } }),
+        });
+        const onSuccess = jest.fn();
+        const EditToolbar = props => (
+            <Toolbar {...props}>
+                <UpdateWithUndoButton
+                    data={{ views: 0 }}
+                    mutationOptions={{ onSuccess }}
+                />
+            </Toolbar>
+        );
+        render(
+            <ThemeProvider theme={theme}>
+                <CoreAdminContext dataProvider={dataProvider}>
+                    <Edit {...defaultEditProps}>
+                        <SimpleForm toolbar={<EditToolbar />}>
+                            <TextInput source="title" />
+                        </SimpleForm>
+                    </Edit>
+                </CoreAdminContext>
+            </ThemeProvider>
+        );
+        // waitFor for the dataProvider.getOne() return
+        await waitFor(() => {
+            expect(screen.queryByDisplayValue('lorem')).not.toBeNull();
+        });
+        fireEvent.click(screen.getByLabelText('ra.action.update'));
+        await waitFor(() => {
+            expect(onSuccess).toHaveBeenCalledWith(
+                { id: 123, title: 'lorem', views: 0 },
+                {
+                    id: 123,
+                    data: { views: 0 },
+                    meta: undefined,
+                    previousData: { id: 123, title: 'lorem', views: 1000 },
+                    resource: 'posts',
+                },
+                { snapshot: expect.any(Array) }
+            );
+        });
+    });
+});
diff --git a/packages/ra-ui-materialui/src/button/UpdateWithUndoButton.tsx b/packages/ra-ui-materialui/src/button/UpdateWithUndoButton.tsx
new file mode 100644
index 00000000000..3b2a50d1e04
--- /dev/null
+++ b/packages/ra-ui-materialui/src/button/UpdateWithUndoButton.tsx
@@ -0,0 +1,142 @@
+import * as React from 'react';
+import { styled } from '@mui/material/styles';
+import { ReactElement } from 'react';
+import PropTypes from 'prop-types';
+import ActionUpdate from '@mui/icons-material/Update';
+import { alpha } from '@mui/material/styles';
+import {
+    useRefresh,
+    useNotify,
+    useResourceContext,
+    RaRecord,
+    useRecordContext,
+    useUpdate,
+    UpdateParams,
+} from 'ra-core';
+import { UseMutationOptions } from 'react-query';
+
+import { Button, ButtonProps } from './Button';
+import { BulkActionProps } from '../types';
+
+export const UpdateWithUndoButton = (props: UpdateWithUndoButtonProps) => {
+    const record = useRecordContext(props);
+    const notify = useNotify();
+    const resource = useResourceContext(props);
+    const refresh = useRefresh();
+
+    const {
+        data,
+        label = 'ra.action.update',
+        icon = defaultIcon,
+        onClick,
+        mutationOptions = {},
+        ...rest
+    } = props;
+
+    const [updateMany, { isLoading }] = useUpdate();
+
+    const {
+        meta: mutationMeta,
+        onSuccess = () => {
+            notify('ra.notification.updated', {
+                type: 'info',
+                messageArgs: { smart_count: 1 },
+                undoable: true,
+            });
+        },
+        onError = (error: Error | string) => {
+            notify(
+                typeof error === 'string'
+                    ? error
+                    : error.message || 'ra.notification.http_error',
+                {
+                    type: 'error',
+                    messageArgs: {
+                        _:
+                            typeof error === 'string'
+                                ? error
+                                : error && error.message
+                                ? error.message
+                                : undefined,
+                    },
+                }
+            );
+            refresh();
+        },
+        ...otherMutationOptions
+    } = mutationOptions;
+
+    const handleClick = e => {
+        updateMany(
+            resource,
+            { id: record.id, data, meta: mutationMeta, previousData: record },
+            {
+                onSuccess,
+                onError,
+                mutationMode: 'undoable',
+                ...otherMutationOptions,
+            }
+        );
+        if (typeof onClick === 'function') {
+            onClick(e);
+        }
+    };
+
+    return (
+        <StyledButton
+            onClick={handleClick}
+            label={label}
+            disabled={isLoading}
+            {...sanitizeRestProps(rest)}
+        >
+            {icon}
+        </StyledButton>
+    );
+};
+
+const defaultIcon = <ActionUpdate />;
+
+const sanitizeRestProps = ({
+    filterValues,
+    label,
+    selectedIds,
+    ...rest
+}: Omit<UpdateWithUndoButtonProps, 'resource' | 'icon' | 'data'>) => rest;
+
+export interface UpdateWithUndoButtonProps<
+    RecordType extends RaRecord = any,
+    MutationOptionsError = unknown
+> extends BulkActionProps,
+        ButtonProps {
+    icon?: ReactElement;
+    data: any;
+    mutationOptions?: UseMutationOptions<
+        RecordType,
+        MutationOptionsError,
+        UpdateParams<RecordType>
+    > & { meta?: any };
+}
+
+UpdateWithUndoButton.propTypes = {
+    label: PropTypes.string,
+    resource: PropTypes.string,
+    record: PropTypes.object,
+    icon: PropTypes.element,
+    data: PropTypes.any.isRequired,
+};
+
+const PREFIX = 'RaUpdateWithUndoButton';
+
+const StyledButton = styled(Button, {
+    name: PREFIX,
+    overridesResolver: (props, styles) => styles.root,
+})(({ theme }) => ({
+    color: theme.palette.primary.main,
+    '&:hover': {
+        backgroundColor: alpha(theme.palette.primary.main, 0.12),
+        // Reset on mouse devices
+        '@media (hover: none)': {
+            backgroundColor: 'transparent',
+        },
+    },
+}));
diff --git a/packages/ra-ui-materialui/src/button/index.ts b/packages/ra-ui-materialui/src/button/index.ts
index d4b2f5b9602..3b09f85102a 100644
--- a/packages/ra-ui-materialui/src/button/index.ts
+++ b/packages/ra-ui-materialui/src/button/index.ts
@@ -27,6 +27,9 @@ export * from './RefreshIconButton';
 export * from './SaveButton';
 export * from './SkipNavigationButton';
 export * from './ToggleThemeButton';
+export * from './UpdateButton';
+export * from './UpdateWithUndoButton';
+export * from './UpdateWithConfirmButton';
 
 export type {
     CloneButtonProps,