<SaveButton>

The <SaveButton> component is a button that is used to submit a form.

SaveButton

<SaveButton> calls the save function defined by the main page component (<Create> or <Edit>), which it grabs from the SaveContext.

Usage

Create a <SaveButton> with custom UI options, or custom side effects, then use that button in a custom <Toolbar> that you can inject to <SimpleForm> or <TabbedForm> using the toolbar prop:

import { SaveButton, Toolbar, Edit, SimpleForm, useNotify, useRedirect } from 'react-admin';

const PostSaveButton = props => {
    const notify = useNotify();
    const redirect = useRedirect();
    const onSuccess = (response) => {
        notify(`Post "${response.data.title}" saved!`);
        redirect('/posts');
    };
    return <SaveButton {...props} mutationOptions= />;
};

const PostEditToolbar = () => (
    <Toolbar>
        <PostSaveButton />
        <DeleteButton />
    </Toolbar>
);

const PostEdit = () => (
    <Edit>
        <SimpleForm toolbar={<PostEditToolbar />}>
            ...
        </SimpleForm>
    </Edit>
);

<SaveButton> accepts the following props:

Additional props (e.g. color, variant) are passed to the underlying MUI <Button> component.

icon

By default, <SaveButton> renders a disk icon. You can can pass another icon element:

import AddBoxIcon from '@mui/icons-material/AddBox';
import { SaveButton } from 'react-admin';

const MySaveButton = props => <SaveButton {...props} icon={<AddBoxIcon />} />;

label

By default, <SaveButton> renders with the “Save” (translated if the user locale isn’t English), whether used on a creation or edition form. You can pass another label:

const PostCreateToolbar = () => (
    <Toolbar>
        <SaveButton label="Create post" />
    </Toolbar>
);

Tip: The label will go through the useTranslate hook, so you can use translation keys.

mutationOptions

You can override the mutationOptions of the main mutation query (dataProvider.create() or dataProvider.update()) by passing a mutationOptions prop to <SaveButton>. This is useful when you have more than one save button.

For instance, to display two save buttons in a creation form, one to save and redirect to the edition page, and the second to save and empty the form:

import { Toolbar, SaveButton, useRedirect, useNotify } from 'react-admin';
import { useFormContext } from 'react-hook-form';

const MyToolbar = () => {
    const { reset } = useFormContext();
    const notify = useNotify();
    return (
        <Toolbar>
            <SaveButton label="Save" />
            <SaveButton 
                label="Save and add"
                mutationOptions={{
                    onSuccess: () => {
                        notify('Element created');
                        reset();
                    }}
                }
                type="button"
                variant="text"
            />
        </Toolbar>
    );
};

Tip: When using custom mutationOptions, you must set the button type to button instead of the default submit, otherwise it’s the main page’s mutationOptions that is used.

onClick

You can add an event handler to the <SaveButton> by passing an onClick callback.

const PostCreateToolbar = () => (
    <Toolbar>
        <SaveButton label="Save" onClick={() => alert('Saving...')} />
    </Toolbar>
);

onClick it doesn’t replace the default submission handler, but is instead called before it. To override the default submission handler, wrap a <SaveButton> in a custom SaveContext.

Note that if you call event.preventDefault() in onClick, the form will not be submitted.

alwaysEnable

By default, the <SaveButton> rendered by <Toolbar> is disabled until there is something to save, i.e. until the user changes at least one input. Set alwaysEnable to true to always enable the button.

import { Toolbar, SaveButton } from 'react-admin';

const MyToolbar = () => (
    <Toolbar>
        <SaveButton alwaysEnable />
    </Toolbar>    
);

sx: CSS API

The <SaveButton> components accept the usual className prop, but you can override many class names injected to the inner components by React-admin thanks to the sx property (as most MUI components, see their documentation about it).

const PostCreateToolbar = () => (
    <Toolbar>
        <SaveButton label="Save" sx={{ margin: 2 }} />
    </Toolbar>
);

To override the style of all instances of <SaveButton> components using the MUI style overrides, use the RaSaveButton key.

transform

A <SaveButton> can specify a callback to transform the record before it is saved. This overrides the transform prop defined in the main page <Edit> or <Create> component.

const transformUser = data => ({
    ...data,
    fullName: `${data.firstName} ${data.lastName}`
});

const UserCreateToolbar = () => (
    <Toolbar>
        <SaveButton transform={transformUser} />
    </Toolbar>
);

type

By default, <SaveButton> renders a submit button. You can change this by passing type="button". It is especially useful when using more than one save button in a form:

import { Toolbar, SaveButton, useRedirect, useNotify } from 'react-admin';
import { useFormContext } from 'react-hook-form';

const MyToolbar = () => {
    const { reset } = useFormContext();
    const notify = useNotify();
    return (
        <Toolbar>
            <SaveButton label="Save" />
            <SaveButton 
                label="Save and add"
                mutationOptions={{
                    onSuccess: () => {
                        notify('Element created');
                        reset();
                    }}
                }
                type="button"
                variant="text"
            />
        </Toolbar>
    );
};