Skip to main content
Refine AI
RefineDocumentation
Version: 3.xx.xx
Swizzle Ready

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.

Swizzle

You can swizzle this component to customize it with the refine CLI

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 "@pankod/refine-react-hook-form";
import { Edit, Box, TextField } from "@pankod/refine-mui";

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​

It is used to show and not show 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 "@pankod/refine-mui";

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

API Reference​

Properties​

External Props

It also accepts all props of Material UI Button.

Previous
Refresh
Next
Show