deep-jade•16mo ago

Disable and hide refresh button on show page

Hi, I would like to disable and hide the refresh button on the show button, while still keeping the other buttons

5 Replies

kapa.ai•16mo ago

Hi @BlackBearFTW. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To disable and hide the RefreshButton on a Show page while keeping the other buttons, you can customize the headerButtons property of the Show component. Below are examples for both Ant Design and Mantine UI integrations. Ant Design You can customize the headerButtons property to exclude the RefreshButton:

import {  
  Show,  
  ListButton,  
  EditButton,  
  DeleteButton,  
} from "@refinedev/antd";  
import { Button } from "antd";  
  
const PostShow: React.FC = () => {  
  return (  
    <Show  
      headerButtons={({  
        deleteButtonProps,  
        editButtonProps,  
        listButtonProps,  
      }) => (  
        <>  
          <Button type="primary">Custom Button</Button>  
          {listButtonProps && (  
            <ListButton {...listButtonProps} meta={{ foo: "bar" }} />  
          )}  
          {editButtonProps && (  
            <EditButton {...editButtonProps} meta={{ foo: "bar" }} />  
          )}  
          {deleteButtonProps && (  
            <DeleteButton {...deleteButtonProps} meta={{ foo: "bar" }} />  
          )}  
          {/* RefreshButton is intentionally omitted */}
        </>  
      )}  
    >  
      <p>Rest of your page here</p>  
    </Show>  
  );  
};

import {  
  Show,  
  ListButton,  
  EditButton,  
  DeleteButton,  
} from "@refinedev/antd";  
import { Button } from "antd";  
  
const PostShow: React.FC = () => {  
  return (  
    <Show  
      headerButtons={({  
        deleteButtonProps,  
        editButtonProps,  
        listButtonProps,  
      }) => (  
        <>  
          <Button type="primary">Custom Button</Button>  
          {listButtonProps && (  
            <ListButton {...listButtonProps} meta={{ foo: "bar" }} />  
          )}  
          {editButtonProps && (  
            <EditButton {...editButtonProps} meta={{ foo: "bar" }} />  
          )}  
          {deleteButtonProps && (  
            <DeleteButton {...deleteButtonProps} meta={{ foo: "bar" }} />  
          )}  
          {/* RefreshButton is intentionally omitted */}
        </>  
      )}  
    >  
      <p>Rest of your page here</p>  
    </Show>  
  );  
};

Source (https://refine.dev/docs/ui-integrations/ant-design/components/basic-views/show/#headerbuttons) Mantine Similarly, for Mantine, you can customize the headerButtons property to exclude the RefreshButton:

import {  
  Show,  
  ListButton,  
  EditButton,  
  DeleteButton,  
} from "@refinedev/mantine";  
import { Button } from "@mantine/core";  
  
const PostShow: React.FC = () => {  
  return (  
    <Show  
      headerButtons={({  
        deleteButtonProps,  
        editButtonProps,  
        listButtonProps,  
      }) => (  
        <>  
          {listButtonProps && (  
            <ListButton {...listButtonProps} meta={{ foo: "bar" }} />  
          )}  
          {editButtonProps && (  
            <EditButton {...editButtonProps} meta={{ foo: "bar" }} />  
          )}  
          {deleteButtonProps && (  
            <DeleteButton {...deleteButtonProps} meta={{ foo: "bar" }} />  
          )}  
          {/* RefreshButton is intentionally omitted */}
          <Button variant="outline" type="primary">  
            Custom Button  
          </Button>  
        </>  
      )}  
    >  
      <p>Rest of your page here</p>  
    </Show>  
  );  
};

import {  
  Show,  
  ListButton,  
  EditButton,  
  DeleteButton,  
} from "@refinedev/mantine";  
import { Button } from "@mantine/core";  
  
const PostShow: React.FC = () => {  
  return (  
    <Show  
      headerButtons={({  
        deleteButtonProps,  
        editButtonProps,  
        listButtonProps,  
      }) => (  
        <>  
          {listButtonProps && (  
            <ListButton {...listButtonProps} meta={{ foo: "bar" }} />  
          )}  
          {editButtonProps && (  
            <EditButton {...editButtonProps} meta={{ foo: "bar" }} />  
          )}  
          {deleteButtonProps && (  
            <DeleteButton {...deleteButtonProps} meta={{ foo: "bar" }} />  
          )}  
          {/* RefreshButton is intentionally omitted */}
          <Button variant="outline" type="primary">  
            Custom Button  
          </Button>  
        </>  
      )}  
    >  
      <p>Rest of your page here</p>  
    </Show>  
  );  
};

Source (https://refine.dev/docs/ui-integrations/mantine/components/basic-views/show/#headerbuttons) By customizing the headerButtons property, you can control which buttons are displayed on the Show page, effectively disabling and hiding the RefreshButton while keeping the other buttons. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•16mo ago

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

deep-jadeOP•16mo ago

@kapa.ai only the delete button should be shown

kapa.ai•16mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- To show only the DeleteButton on the Show page, you can customize the headerButtons property to include only the DeleteButton. Below are examples for both Ant Design and Mantine UI integrations. Ant Design You can customize the headerButtons property to include only the DeleteButton:

import { Show, DeleteButton } from "@refinedev/antd";  
import { usePermissions } from "@refinedev/core";  
  
const PostShow: React.FC = () => {  
  const { data: permissionsData } = usePermissions();  
  
  return (  
    <Show  
      headerButtons={({ deleteButtonProps }) => (  
        <>  
          {deleteButtonProps && (  
            <DeleteButton {...deleteButtonProps} meta={{ foo: "bar" }} />  
          )}  
        </>  
      )}  
    >  
      <p>Rest of your page here</p>  
    </Show>  
  );  
};

import { Show, DeleteButton } from "@refinedev/antd";  
import { usePermissions } from "@refinedev/core";  
  
const PostShow: React.FC = () => {  
  const { data: permissionsData } = usePermissions();  
  
  return (  
    <Show  
      headerButtons={({ deleteButtonProps }) => (  
        <>  
          {deleteButtonProps && (  
            <DeleteButton {...deleteButtonProps} meta={{ foo: "bar" }} />  
          )}  
        </>  
      )}  
    >  
      <p>Rest of your page here</p>  
    </Show>  
  );  
};

import { Show, DeleteButton } from "@refinedev/mantine";  
import { usePermissions } from "@refinedev/core";  
  
const PostShow: React.FC = () => {  
  const { data: permissionsData } = usePermissions();  
  
  return (  
    <Show  
      headerButtons={({ deleteButtonProps }) => (  
        <>  
          {deleteButtonProps && (  
            <DeleteButton {...deleteButtonProps} meta={{ foo: "bar" }} />  
          )}  
        </>  
      )}  
    >  
      <p>Rest of your page here</p>  
    </Show>  
  );  
};

import { Show, DeleteButton } from "@refinedev/mantine";  
import { usePermissions } from "@refinedev/core";  
  
const PostShow: React.FC = () => {  
  const { data: permissionsData } = usePermissions();  
  
  return (  
    <Show  
      headerButtons={({ deleteButtonProps }) => (  
        <>  
          {deleteButtonProps && (  
            <DeleteButton {...deleteButtonProps} meta={{ foo: "bar" }} />  
          )}  
        </>  
      )}  
    >  
      <p>Rest of your page here</p>  
    </Show>  
  );  
};

Source (https://refine.dev/docs/ui-integrations/mantine/components/basic-views/show/#headerbuttons) By customizing the headerButtons property, you can ensure that only the DeleteButton is displayed on the Show page. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•16mo ago

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

Disable and hide refresh button on show page

Did you find this page helpful?