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:
// visible-block-start
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;
}
// visible-block-end
render(
<RefineAntdDemo
initialRoutes={["/posts/edit/123"]}
resources={[
{
name: "posts",
edit: PostEdit,
list: () => {
return (
<RefineAntd.List>
<p>Your list page here</p>
</RefineAntd.List>
);
},
},
]}
/>,
);
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.
// visible-block-start
import { SaveButton } from "@refinedev/antd";
const MySaveComponent = () => {
return (
<SaveButton
hideText
/>
);
};
// visible-block-end
render(
<RefineAntdDemo
initialRoutes={["/"]}
resources={[
{
name: "posts",
list: MySaveComponent,
},
]}
/>,
);
API Reference
Properties
External Props:
<SaveButton> also accepts all props of Ant Design's Button component.