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.

Swizzle

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 />;
};

Usage​

Properties​

hideText​

API Reference​

Properties​

Usage

Properties

`hideText`

API Reference

Properties