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

Save

<SaveButton> uses Mantine <Button> component. It uses it for presentation 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/edit/123
Live previews only work with the latest documentation.
import { Edit, useForm, useSelect } from "@refinedev/mantine";
import { Select, TextInput } from "@mantine/core";

const PostEdit: React.FC = () => {
  const {
    saveButtonProps,
    getInputProps,
    refineCore: { queryResult },
  } = useForm<IPost>({
    initialValues: {
      title: "",
      status: "",
      category: {
        id: "",
      },
    },
    validate: {
      title: (value) => (value.length < 2 ? "Too short title" : null),
      status: (value) => (value.length <= 0 ? "Status is required" : null),
      category: {
        id: (value) => (value.length <= 0 ? "Category is required" : null),
      },
    },
  });

  const postData = queryResult?.data?.data;
  const { selectProps } = useSelect<ICategory>({
    resource: "categories",
    defaultValue: postData?.category.id,
  });

  return (
    <Edit saveButtonProps={saveButtonProps}>
      <form>
        <TextInput
          mt={8}
          label="Title"
          placeholder="Title"
          {...getInputProps("title")}
        />
        <Select
          mt={8}
          label="Status"
          placeholder="Pick one"
          {...getInputProps("status")}
          data={[
            { label: "Published", value: "published" },
            { label: "Draft", value: "draft" },
            { label: "Rejected", value: "rejected" },
          ]}
        />
        <Select
          mt={8}
          label="Category"
          placeholder="Pick one"
          {...getInputProps("category.id")}
          {...selectProps}
        />
      </form>
    </Edit>
  );
};

Properties​

hideText​

hideText 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 "@refinedev/mantine";

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

API Reference​

Properties​

PropertyTypeDescriptionDefault
hideText

boolean

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

false

onClick

PointerEventHandler<HTMLButtonElement>

Sets the handler to handle click event

hidden

boolean

svgIconProps

Omit<IconProps, "ref">

Previous
Refresh
Next
Show