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

Property	Type	Description	Default
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.

Usage​

Properties​

hideText​

API Reference​

Properties​

Usage

Properties

hideText

API Reference

Properties