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

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.

Good to know:

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

Usage​

Let's add logic to the <SaveButton> component with the saveButtonProps returned by the useForm hook:

localhost:3000/posts/edit/123
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 the <SaveButton> component which includes submitting the form action, button loading, and disable states.

Properties​

hideText​

hideText is used to hide the text of the button. When its true, only the button icon will be visible.

localhost:3000
import { SaveButton } from "@refinedev/antd";

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> & MouseEventHandler<HTMLElement>)

Sets the handler to handle click event

External Props:

<SaveButton> also accepts all props of Ant Design's Button component.