Skip to main content
Version: 2.xx.xx

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.

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";

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: string;
title: string;
}

Will look like this:

Default save button

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";

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

API Reference​

Properties​

PropertyDescriptionTypeDefault
propsAnt Design button propsButtonProps & { hideText?: boolean; }
hideTextAllows to hide button textbooleanfalse
childrenSets the button textReactNode"Save"
typeSets the button typestring"primary"
iconSets the icon component of buttonReactNode<SaveOutlined />