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.