extended-salmon
extended-salmon12mo ago

Hide refresh button in edit page

@kapa.ai , I am using Edit of @refinedev/mui, in which a refresh button is provided by default. I dont want the refresh button, is there any prop for it?
2 Replies
kapa.ai
kapa.ai12mo ago
Hi @jenish7822. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Yes, you can customize the header buttons in the <Edit> component of @refinedev/mui by using the headerButtons prop. You can create your own buttons or simply remove the default ones, including the refresh button. Here's an example of how to remove the default refresh button and add a custom button:
import { Edit, ListButton } from "@refinedev/mui";
import { Button } from "@mui/material";

const PostEdit: React.FC = () => {
return (
<Edit
headerButtons={({ listButtonProps }) => (
<>
{listButtonProps && (
<ListButton {...listButtonProps} meta={{ foo: "bar" }} />
)}
<Button type="primary">Custom Button</Button>
</>
)}
>
<span>Rest of your page here</span>
</Edit>
);
};
import { Edit, ListButton } from "@refinedev/mui";
import { Button } from "@mui/material";

const PostEdit: React.FC = () => {
return (
<Edit
headerButtons={({ listButtonProps }) => (
<>
{listButtonProps && (
<ListButton {...listButtonProps} meta={{ foo: "bar" }} />
)}
<Button type="primary">Custom Button</Button>
</>
)}
>
<span>Rest of your page here</span>
</Edit>
);
};
In this example, we're using the headerButtons prop to render only the <ListButton> and a custom button, effectively removing the default refresh button. Source: refine.dev/docs/api-reference/mui/components/basic-views/edit (https://refine.dev/docs/api-reference/mui/components/basic-views/edit) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai12mo ago
<@713646363425898567> kapa.ai is still learning and improving, please let us how it did by reacting below