Skip to main content
Version: 4.xx.xx
Swizzle Ready

Save

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

Good to know:

You can swizzle this component with the Refine CLI to customize it.

Usage​

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

localhost:3000/posts
import { useForm } from "@refinedev/react-hook-form";
import { Edit } from "@refinedev/mui";
import { Box, TextField } from "@mui/material";

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;
}

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

Properties​

hideText​

hideText is used to show or hide the text of the button. When true, only the button icon is visible.

localhost:3000
import { SaveButton } from "@refinedev/mui";

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

API Reference​

Properties​

PropertyTypeDescriptionDefault
hideText

boolean

Whether should hide the text and show only the icon or not.

false

onClick

(PointerEventHandler<HTMLButtonElement> & MouseEventHandler<HTMLButtonElement>)

Sets the handler to handle click event

svgIconProps

SvgIconProps

External Props:

It also accepts all props of Material UI Button.