Skip to main content
Version: 3.xx.xx

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:

Default save button

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​

PropertyDescriptionTypeDefault
propsMaterial UI button propsButtonProps
hideTextAllows to hide button textbooleanfalse
childrenSets the button textReactNode"Save"
startIconSets the icon component of buttonReactNode<SaveOutlinedIcon />
svgIconPropsAllows to set icon propsSvgIconProps