diff --git a/examples/simple/src/users/UserCreate.js b/examples/simple/src/users/UserCreate.js
index a4d402acc55..c945177cb62 100644
--- a/examples/simple/src/users/UserCreate.js
+++ b/examples/simple/src/users/UserCreate.js
@@ -13,7 +13,14 @@ import {
 
 import Aside from './Aside';
 
-const UserEditToolbar = ({ permissions, ...props }) => (
+const UserEditToolbar = ({
+    permissions,
+    hasList,
+    hasEdit,
+    hasShow,
+    hasCreate,
+    ...props
+}) => (
     <Toolbar {...props}>
         <SaveButton
             label="user.action.save_and_show"
diff --git a/packages/ra-core/src/controller/CreateController.tsx b/packages/ra-core/src/controller/CreateController.tsx
index 248a35f7d9c..592c13a45dd 100644
--- a/packages/ra-core/src/controller/CreateController.tsx
+++ b/packages/ra-core/src/controller/CreateController.tsx
@@ -1,146 +1,35 @@
-import { ReactNode, useCallback } from 'react';
-// @ts-ignore
-import { useDispatch, useSelector } from 'react-redux';
-import inflection from 'inflection';
-import { parse } from 'query-string';
-
-import { crudCreate } from '../actions';
-import { useCheckMinimumRequiredProps } from './checkMinimumRequiredProps';
-import { Location } from 'history';
-import { match as Match } from 'react-router';
-import { Record, Translate, ReduxState } from '../types';
-import { RedirectionSideEffect } from '../sideEffect';
+import { Translate } from '../types';
 import { useTranslate } from '../i18n';
+import useCreateController, {
+    CreateProps,
+    CreateControllerProps,
+} from './useCreateController';
 
-interface ChildrenFuncParams {
-    isLoading: boolean;
-    defaultTitle: string;
-    save: (record: Partial<Record>, redirect: RedirectionSideEffect) => void;
-    resource: string;
-    basePath: string;
-    record?: Partial<Record>;
-    redirect: RedirectionSideEffect;
+interface CreateControllerComponentProps extends CreateControllerProps {
     translate: Translate;
 }
 
-interface Props {
-    basePath: string;
-    children: (params: ChildrenFuncParams) => ReactNode;
-    hasCreate?: boolean;
-    hasEdit?: boolean;
-    hasList?: boolean;
-    hasShow?: boolean;
-    location: Location;
-    match: Match;
-    record?: Partial<Record>;
-    resource: string;
+interface Props extends CreateProps {
+    children: (params: CreateControllerComponentProps) => JSX.Element;
 }
 
 /**
- * Page component for the Create view
- *
- * The `<Create>` component renders the page title and actions.
- * It is not responsible for rendering the actual form -
- * that's the job of its child component (usually `<SimpleForm>`),
- * to which it passes pass the `record` as prop.
- *
- * The `<Create>` component accepts the following props:
- *
- * - title
- * - actions
- *
- * Both expect an element for value.
+ * Render prop version of the useCreateController hook
  *
+ * @see useCreateController
  * @example
- *     // in src/posts.js
- *     import React from 'react';
- *     import { Create, SimpleForm, TextInput } from 'react-admin';
- *
- *     export const PostCreate = (props) => (
- *         <Create {...props}>
- *             <SimpleForm>
- *                 <TextInput source="title" />
- *             </SimpleForm>
- *         </Create>
- *     );
- *
- *     // in src/App.js
- *     import React from 'react';
- *     import { Admin, Resource } from 'react-admin';
  *
- *     import { PostCreate } from './posts';
- *
- *     const App = () => (
- *         <Admin dataProvider={...}>
- *             <Resource name="posts" create={PostCreate} />
- *         </Admin>
- *     );
- *     export default App;
+ * const CreateView = () => <div>...</div>
+ * const MyCreate = props => (
+ *     <CreateController {...props}>
+ *         {controllerProps => <CreateView {...controllerProps} {...props} />}
+ *     </CreateController>
+ * );
  */
-const CreateController = (props: Props) => {
-    useCheckMinimumRequiredProps(
-        'Create',
-        ['basePath', 'location', 'resource', 'children'],
-        props
-    );
-    const {
-        basePath,
-        children,
-        resource,
-        location,
-        record = {},
-        hasShow,
-        hasEdit,
-    } = props;
-
-    const translate = useTranslate();
-    const dispatch = useDispatch();
-    const recordToUse = getRecord(location, record);
-    const isLoading = useSelector(
-        (state: ReduxState) => state.admin.loading > 0
-    );
-
-    const save = useCallback(
-        (data: Partial<Record>, redirect: RedirectionSideEffect) => {
-            dispatch(crudCreate(resource, data, basePath, redirect));
-        },
-        [resource, basePath] // eslint-disable-line react-hooks/exhaustive-deps
-    );
-
-    const resourceName = translate(`resources.${resource}.name`, {
-        smart_count: 1,
-        _: inflection.humanize(inflection.singularize(resource)),
-    });
-    const defaultTitle = translate('ra.page.create', {
-        name: `${resourceName}`,
-    });
-    return children({
-        isLoading,
-        defaultTitle,
-        save,
-        resource,
-        basePath,
-        record: recordToUse,
-        redirect: getDefaultRedirectRoute(hasShow, hasEdit),
-        translate,
-    });
+const CreateController = ({ children, ...props }: Props) => {
+    const controllerProps = useCreateController(props);
+    const translate = useTranslate(); // injected for backwards compatibility
+    return children({ translate, ...controllerProps });
 };
 
 export default CreateController;
-
-export const getRecord = ({ state, search }, record: any = {}) =>
-    state && state.record
-        ? state.record
-        : search
-        ? parse(search, { arrayFormat: 'bracket' })
-        : record;
-
-const getDefaultRedirectRoute = (hasShow, hasEdit) => {
-    if (hasEdit) {
-        return 'edit';
-    }
-    if (hasShow) {
-        return 'show';
-    }
-    return 'list';
-};
diff --git a/packages/ra-core/src/controller/index.ts b/packages/ra-core/src/controller/index.ts
index 4c0f990973c..1da352fc3b7 100644
--- a/packages/ra-core/src/controller/index.ts
+++ b/packages/ra-core/src/controller/index.ts
@@ -12,6 +12,7 @@ import useSortState from './useSortState';
 import usePaginationState from './usePaginationState';
 import useListController from './useListController';
 import useEditController from './useEditController';
+import useCreateController from './useCreateController';
 import useShowController from './useShowController';
 import { useCheckMinimumRequiredProps } from './checkMinimumRequiredProps';
 export {
@@ -24,6 +25,7 @@ export {
     useCheckMinimumRequiredProps,
     useListController,
     useEditController,
+    useCreateController,
     useShowController,
     useRecordSelection,
     useVersion,
diff --git a/packages/ra-core/src/controller/CreateController.spec.tsx b/packages/ra-core/src/controller/useCreateController.spec.tsx
similarity index 94%
rename from packages/ra-core/src/controller/CreateController.spec.tsx
rename to packages/ra-core/src/controller/useCreateController.spec.tsx
index 2f6c0649f60..6ff99119ae4 100644
--- a/packages/ra-core/src/controller/CreateController.spec.tsx
+++ b/packages/ra-core/src/controller/useCreateController.spec.tsx
@@ -1,6 +1,6 @@
-import { getRecord } from './CreateController';
+import { getRecord } from './useCreateController';
 
-describe('CreateController', () => {
+describe('useCreateController', () => {
     describe('getRecord', () => {
         const location = {
             pathname: '/foo',
diff --git a/packages/ra-core/src/controller/useCreateController.ts b/packages/ra-core/src/controller/useCreateController.ts
new file mode 100644
index 00000000000..fdae4cd125b
--- /dev/null
+++ b/packages/ra-core/src/controller/useCreateController.ts
@@ -0,0 +1,138 @@
+import { useCallback } from 'react';
+// @ts-ignore
+import inflection from 'inflection';
+import { parse } from 'query-string';
+
+import { useCreate } from '../fetch';
+import { useCheckMinimumRequiredProps } from './checkMinimumRequiredProps';
+import { Location } from 'history';
+import { match as Match } from 'react-router';
+import { Record } from '../types';
+import { RedirectionSideEffect } from '../sideEffect';
+import { useTranslate } from '../i18n';
+
+export interface CreateControllerProps {
+    isLoading: boolean;
+    isSaving: boolean;
+    defaultTitle: string;
+    save: (record: Partial<Record>, redirect: RedirectionSideEffect) => void;
+    resource: string;
+    basePath: string;
+    record?: Partial<Record>;
+    redirect: RedirectionSideEffect;
+}
+
+export interface CreateProps {
+    basePath: string;
+    hasCreate?: boolean;
+    hasEdit?: boolean;
+    hasList?: boolean;
+    hasShow?: boolean;
+    location: Location;
+    match: Match;
+    record?: Partial<Record>;
+    resource: string;
+}
+
+/**
+ * Prepare data for the Create view
+ *
+ * @param {Object} props The props passed to the Create component.
+ *
+ * @return {Object} controllerProps Fetched data and callbacks for the Create view
+ *
+ * @example
+ *
+ * import { useCreateController } from 'react-admin';
+ * import CreateView from './CreateView';
+ *
+ * const MyCreate = props => {
+ *     const controllerProps = useCreateController(props);
+ *     return <CreateView {...controllerProps} {...props} />;
+ * }
+ */
+const useCreateController = (props: CreateProps): CreateControllerProps => {
+    useCheckMinimumRequiredProps(
+        'Create',
+        ['basePath', 'location', 'resource'],
+        props
+    );
+    const {
+        basePath,
+        resource,
+        location,
+        record = {},
+        hasShow,
+        hasEdit,
+    } = props;
+
+    const translate = useTranslate();
+    const recordToUse = getRecord(location, record);
+
+    const [create, { loading: isSaving }] = useCreate(
+        resource,
+        {}, // set by the caller
+        {
+            onSuccess: {
+                notification: {
+                    body: 'ra.notification.created',
+                    level: 'info',
+                    messageArgs: {
+                        smart_count: 1,
+                    },
+                },
+                basePath,
+            },
+            onFailure: {
+                notification: {
+                    body: 'ra.notification.http_error',
+                    level: 'warning',
+                },
+            },
+        }
+    );
+
+    const save = useCallback(
+        (data: Partial<Record>, redirectTo = 'list') =>
+            create(null, { data }, { onSuccess: { redirectTo } }),
+        [create]
+    );
+
+    const resourceName = translate(`resources.${resource}.name`, {
+        smart_count: 1,
+        _: inflection.humanize(inflection.singularize(resource)),
+    });
+    const defaultTitle = translate('ra.page.create', {
+        name: `${resourceName}`,
+    });
+
+    return {
+        isLoading: false,
+        isSaving,
+        defaultTitle,
+        save,
+        resource,
+        basePath,
+        record: recordToUse,
+        redirect: getDefaultRedirectRoute(hasShow, hasEdit),
+    };
+};
+
+export default useCreateController;
+
+export const getRecord = ({ state, search }, record: any = {}) =>
+    state && state.record
+        ? state.record
+        : search
+        ? parse(search, { arrayFormat: 'bracket' })
+        : record;
+
+const getDefaultRedirectRoute = (hasShow, hasEdit) => {
+    if (hasEdit) {
+        return 'edit';
+    }
+    if (hasShow) {
+        return 'show';
+    }
+    return 'list';
+};
diff --git a/packages/ra-core/src/fetch/index.ts b/packages/ra-core/src/fetch/index.ts
index 9dc411230b1..dd56e8622c6 100644
--- a/packages/ra-core/src/fetch/index.ts
+++ b/packages/ra-core/src/fetch/index.ts
@@ -10,6 +10,7 @@ import withDataProvider from './withDataProvider';
 import useGetOne from './useGetOne';
 import useGetList from './useGetList';
 import useUpdate from './useUpdate';
+import useCreate from './useCreate';
 
 export {
     fetchUtils,
@@ -22,6 +23,7 @@ export {
     useGetOne,
     useGetList,
     useUpdate,
+    useCreate,
     useQueryWithStore,
     withDataProvider,
 };
diff --git a/packages/ra-core/src/fetch/useCreate.ts b/packages/ra-core/src/fetch/useCreate.ts
new file mode 100644
index 00000000000..6639c8a2778
--- /dev/null
+++ b/packages/ra-core/src/fetch/useCreate.ts
@@ -0,0 +1,37 @@
+import { CRUD_CREATE } from '../actions/dataActions/crudCreate';
+import { CREATE } from '../dataFetchActions';
+import useMutation from './useMutation';
+
+/**
+ * Get a callback to call the dataProvider with a CREATE verb, the result and the loading state.
+ *
+ * The return value updates according to the request state:
+ *
+ * - start: [callback, { loading: true, loaded: false }]
+ * - success: [callback, { data: [data from response], loading: false, loaded: true }]
+ * - error: [callback, { error: [error from response], loading: false, loaded: true }]
+ *
+ * @param resource The resource name, e.g. 'posts'
+ * @param data The data to initialize the new record with, e.g. { title: 'hello, world" }
+ * @param options Options object to pass to the dataProvider. May include side effects to be executed upon success of failure, e.g. { onSuccess: { refresh: true } }
+ *
+ * @returns The current request state. Destructure as [create, { data, error, loading, loaded }].
+ *
+ * @example
+ *
+ * import { useCreate } from 'react-admin';
+ *
+ * const LikeButton = ({ record }) => {
+ *     const like = { postId: record.id };
+ *     const [create, { loading, error }] = useCreate('likes', like);
+ *     if (error) { return <p>ERROR</p>; }
+ *     return <button disabled={loading} onClick={create}>Like</div>;
+ * };
+ */
+const useCreate = (resource: string, data?: any, options?: any) =>
+    useMutation(
+        { type: CREATE, resource, payload: { data } },
+        { ...options, action: CRUD_CREATE }
+    );
+
+export default useCreate;
diff --git a/packages/ra-ui-materialui/src/button/SaveButton.js b/packages/ra-ui-materialui/src/button/SaveButton.js
index 44390924cd8..54dec39f631 100644
--- a/packages/ra-ui-materialui/src/button/SaveButton.js
+++ b/packages/ra-ui-materialui/src/button/SaveButton.js
@@ -60,7 +60,7 @@ export class SaveButton extends Component {
         showNotification: PropTypes.func,
         submitOnEnter: PropTypes.bool,
         translate: PropTypes.func.isRequired,
-        variant: PropTypes.oneOf(['raised', 'flat', 'fab']),
+        variant: PropTypes.oneOf(['text', 'raised', 'flat', 'fab']),
         icon: PropTypes.element,
     };
 
diff --git a/packages/ra-ui-materialui/src/detail/Create.js b/packages/ra-ui-materialui/src/detail/Create.js
index 430e0691e71..5a9b8dd729d 100644
--- a/packages/ra-ui-materialui/src/detail/Create.js
+++ b/packages/ra-ui-materialui/src/detail/Create.js
@@ -1,13 +1,73 @@
 import React, { Children, cloneElement } from 'react';
 import PropTypes from 'prop-types';
 import Card from '@material-ui/core/Card';
-import { withStyles, createStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import classnames from 'classnames';
-import { CreateController } from 'ra-core';
+import { useCheckMinimumRequiredProps, useCreateController } from 'ra-core';
 
 import TitleForRecord from '../layout/TitleForRecord';
 
-const styles = createStyles({
+/**
+ * Page component for the Create view
+ *
+ * The `<Create>` component renders the page title and actions.
+ * It is not responsible for rendering the actual form -
+ * that's the job of its child component (usually `<SimpleForm>`),
+ * to which it passes pass the `record` as prop.
+ *
+ * The `<Create>` component accepts the following props:
+ *
+ * - title
+ * - actions
+ *
+ * Both expect an element for value.
+ *
+ * @example
+ *     // in src/posts.js
+ *     import React from 'react';
+ *     import { Create, SimpleForm, TextInput } from 'react-admin';
+ *
+ *     export const PostCreate = (props) => (
+ *         <Create {...props}>
+ *             <SimpleForm>
+ *                 <TextInput source="title" />
+ *             </SimpleForm>
+ *         </Create>
+ *     );
+ *
+ *     // in src/App.js
+ *     import React from 'react';
+ *     import { Admin, Resource } from 'react-admin';
+ *
+ *     import { PostCreate } from './posts';
+ *
+ *     const App = () => (
+ *         <Admin dataProvider={...}>
+ *             <Resource name="posts" create={PostCreate} />
+ *         </Admin>
+ *     );
+ *     export default App;
+ */
+const Create = props => (
+    <CreateView {...props} {...useCreateController(props)} />
+);
+
+Create.propTypes = {
+    actions: PropTypes.element,
+    aside: PropTypes.element,
+    children: PropTypes.element,
+    classes: PropTypes.object,
+    className: PropTypes.string,
+    hasCreate: PropTypes.bool,
+    hasEdit: PropTypes.bool,
+    hasShow: PropTypes.bool,
+    resource: PropTypes.string.isRequired,
+    title: PropTypes.node,
+    record: PropTypes.object,
+    hasList: PropTypes.bool,
+};
+
+const useStyles = makeStyles({
     root: {},
     main: {
         display: 'flex',
@@ -26,6 +86,7 @@ const sanitizeRestProps = ({
     className,
     crudCreate,
     isLoading,
+    isSaving,
     resource,
     title,
     hasCreate,
@@ -38,17 +99,16 @@ const sanitizeRestProps = ({
     options,
     locale,
     permissions,
-    translate,
     ...rest
 }) => rest;
 
-export const CreateView = withStyles(styles)(
-    ({
+export const CreateView = props => {
+    const {
         actions,
         aside,
         basePath,
         children,
-        classes,
+        classes: classesOverride,
         className,
         defaultTitle,
         hasList,
@@ -59,7 +119,10 @@ export const CreateView = withStyles(styles)(
         save,
         title,
         ...rest
-    }) => (
+    } = props;
+    useCheckMinimumRequiredProps('Create', ['children'], props);
+    const classes = useStyles({ classes: classesOverride });
+    return (
         <div
             className={classnames('create-page', classes.root, className)}
             {...sanitizeRestProps(rest)}
@@ -103,8 +166,8 @@ export const CreateView = withStyles(styles)(
                     })}
             </div>
         </div>
-    )
-);
+    );
+};
 
 CreateView.propTypes = {
     actions: PropTypes.element,
@@ -127,66 +190,4 @@ CreateView.defaultProps = {
     classes: {},
 };
 
-/**
- * Page component for the Create view
- *
- * The `<Create>` component renders the page title and actions.
- * It is not responsible for rendering the actual form -
- * that's the job of its child component (usually `<SimpleForm>`),
- * to which it passes pass the `record` as prop.
- *
- * The `<Create>` component accepts the following props:
- *
- * - title
- * - actions
- *
- * Both expect an element for value.
- *
- * @example
- *     // in src/posts.js
- *     import React from 'react';
- *     import { Create, SimpleForm, TextInput } from 'react-admin';
- *
- *     export const PostCreate = (props) => (
- *         <Create {...props}>
- *             <SimpleForm>
- *                 <TextInput source="title" />
- *             </SimpleForm>
- *         </Create>
- *     );
- *
- *     // in src/App.js
- *     import React from 'react';
- *     import { Admin, Resource } from 'react-admin';
- *
- *     import { PostCreate } from './posts';
- *
- *     const App = () => (
- *         <Admin dataProvider={...}>
- *             <Resource name="posts" create={PostCreate} />
- *         </Admin>
- *     );
- *     export default App;
- */
-const Create = props => (
-    <CreateController {...props}>
-        {controllerProps => <CreateView {...props} {...controllerProps} />}
-    </CreateController>
-);
-
-Create.propTypes = {
-    actions: PropTypes.element,
-    aside: PropTypes.element,
-    children: PropTypes.element,
-    classes: PropTypes.object,
-    className: PropTypes.string,
-    hasCreate: PropTypes.bool,
-    hasEdit: PropTypes.bool,
-    hasShow: PropTypes.bool,
-    resource: PropTypes.string.isRequired,
-    title: PropTypes.node,
-    record: PropTypes.object,
-    hasList: PropTypes.bool,
-};
-
 export default Create;