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.
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.
import { Edit, Form, Input, useForm } from "@pankod/refine-antd";
export 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;
}
Will look like this:
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.
import { SaveButton } from "@pankod/refine-antd";
export const MySaveComponent = () => {
return <SaveButton hideText />;
};
API Reference
Properties
External Props
It also accepts all props of Ant Design Button.