Skip to main content
Version: 4.xx.xx
Swizzle Ready

Save

<SaveButton> uses Chakra UI'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

For example, lets add logic to the <SaveButton> component with the saveButtonProps returned by the useForm hook.

localhost:3000/posts/edit/123
import { Edit } from "@refinedev/chakra-ui";
import {
FormControl,
FormErrorMessage,
FormLabel,
Input,
Select,
} from "@chakra-ui/react";
import { useSelect } from "@refinedev/core";
import { useForm } from "@refinedev/react-hook-form";

const PostEdit: React.FC = () => {
const {
refineCore: { formLoading, queryResult },
saveButtonProps,
register,
formState: { errors },
resetField,
} = useForm<IPost>();

const { options } = useSelect({
resource: "categories",
defaultValue: queryResult?.data?.data.category.id,
queryOptions: { enabled: !!queryResult?.data?.data.category.id },
});

useEffect(() => {
resetField("category.id");
}, [options]);

return (
<Edit isLoading={formLoading} saveButtonProps={saveButtonProps}>
<FormControl mb="3" isInvalid={!!errors?.title}>
<FormLabel>Title</FormLabel>
<Input
id="title"
type="text"
{...register("title", { required: "Title is required" })}
/>
<FormErrorMessage>{`${errors.title?.message}`}</FormErrorMessage>
</FormControl>
<FormControl mb="3" isInvalid={!!errors?.status}>
<FormLabel>Status</FormLabel>
<Select
id="content"
placeholder="Select Post Status"
{...register("status", {
required: "Status is required",
})}
>
<option>published</option>
<option>draft</option>
<option>rejected</option>
</Select>
<FormErrorMessage>{`${errors.status?.message}`}</FormErrorMessage>
</FormControl>
<FormControl mb="3" isInvalid={!!errors?.categoryId}>
<FormLabel>Category</FormLabel>
<Select
id="ca"
placeholder="Select Category"
{...register("category.id", {
required: true,
})}
>
{options?.map((option) => (
<option value={option.value} key={option.value}>
{option.label}
</option>
))}
</Select>
<FormErrorMessage>{`${errors.categoryId?.message}`}</FormErrorMessage>
</FormControl>
</Edit>
);
};

Properties

hideText

hideText is used to show and not show the text of the button. When true, only the button icon is visible.

localhost:3000
import { SaveButton } from "@refinedev/chakra-ui";

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<HTMLButtonElement>)

Sets the handler to handle click event

svgIconProps

Omit<IconProps, "ref">