Skip to main content
RefineDocumentation
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
Live previews only work with the latest documentation.
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
Live previews only work with the latest documentation.
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.

Previous
Refresh
Next
Show