Save

<SaveButton> uses Material UI <Button> component. It uses it for presantation purposes only. Some of the hooks that refine has adds features to this button.

Usage

For example, let's add logic to the <SaveButton> component with the saveButtonProps returned by the useForm hook.

src/pages/posts/edit.tsx

import { useForm } from "@pankod/refine-react-hook-form";
import { Edit, Box, TextField } from "@pankod/refine-mui";

export const PostEdit: React.FC = () => {
    const {
        refineCore: { onFinish, formLoading },
        register,
        handleSubmit,
        formState: { errors },
    } = useForm<ICategory>();

    return (
        <Edit
            isLoading={formLoading}
            saveButtonProps={{ onClick: handleSubmit(onFinish) }}
        >
            <Box component="form">
                <TextField
                    {...register("title", { required: true })}
                    error={!!errors?.title}
                    helperText={errors?.title?.message}
                    margin="normal"
                    required
                    fullWidth
                    id="title"
                    label="Title"
                    name="title"
                    defaultValue={" "}
                />
            </Box>
        </Edit>
    );
};

interface ICategory {
    id: number;
    title: string;
}

Will look like this:

The useForm hook exposes saveButtonProps to be passed to <SaveButton> component which includes submitting the form action, button loading, and disable states.

Properties

hideText

It is used to show and not show the text of the button. When true, only the button icon is visible.

import { SaveButton } from "@pankod/refine-mui";

export const MySaveComponent = () => {
    return <SaveButton hideText />;
};

API Reference

Properties

Property	Description	Type	Default
props	Material UI button props	ButtonProps
hideText	Allows to hide button text	boolean	false
children	Sets the button text	ReactNode	"Save"
startIcon	Sets the icon component of button	ReactNode	<SaveOutlinedIcon />
svgIconProps	Allows to set icon props	SvgIconProps