Skip to main content
Version: 3.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-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: 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-antd";

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 />