Skip to main content
Refine AI
RefineDocumentation
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:

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​

PropertyTypeDescriptionDefault
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.

Previous
Refresh
Next
Show