Skip to main content
🧙‍♂️ refine grants your wishes! Please give us a ⭐️ on GitHub to keep the magic going.
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.

Swizzle

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