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

Save

<SaveButton> uses Mantine <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/edit/123
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
import { SaveButton } from "@refinedev/mantine";

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

API Reference​

Properties​

Was this helpful?