optimistic-gold•2y 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•2y 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•2y ago

<@713646363425898567> kapa.ai is still learning and improving, please let us how it did by reacting below