Save

<SaveButton> uses Ant Design's <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.

http://localhost:3000

import { Edit, useForm } from "@refinedev/antd";
import { Form, Input } from "antd";

const PostEdit: React.FC = () => {
    const { formProps, saveButtonProps } = useForm<IPost>();

    return (
        <Edit saveButtonProps={saveButtonProps}>
            <Form {...formProps} layout="vertical">
                <Form.Item
                    label="Title"
                    name="title"
                    rules={[
                        {
                            required: true,
                        },
                    ]}
                >
                    <Input />
                </Form.Item>
            </Form>
        </Edit>
    );
};

interface IPost {
    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.

http://localhost:3000

import { SaveButton } from "@refinedev/antd";

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

API Reference

Properties

External Props

It also accepts all props of Ant Design Button.