Hide ListButton

How can I hide the list button on the show page

2 Replies

Hi @BlackBearFTW. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- You can hide the ListButton on the Show page by customizing the headerButtons property of the Show component. This property accepts a render function where you can choose which buttons to display. If you don't include the ListButton in your render function, it won't be displayed. Here's an example of how you can do this:

import { Show } from "@refinedev/antd";  
import { Button } from "antd";  
  
const PostShow: React.FC = () => {  
 return (  
 <Show  
 headerButtons={({ defaultButtons }) => (  
 <>  
 {defaultButtons.filter(button => button.type.name !== 'ListButton')}  
 <Button type="primary">Custom Button</Button>  
 </>  
 )}  
 >  
 <p>Rest of your page here</p>  
 </Show>
 );  
};

import { Show } from "@refinedev/antd";  
import { Button } from "antd";  
  
const PostShow: React.FC = () => {  
 return (  
 <Show  
 headerButtons={({ defaultButtons }) => (  
 <>  
 {defaultButtons.filter(button => button.type.name !== 'ListButton')}  
 <Button type="primary">Custom Button</Button>  
 </>  
 )}  
 >  
 <p>Rest of your page here</p>  
 </Show>
 );  
};

In this example, we're filtering out the ListButton from the default buttons. Please note that this is a simplified example and might need adjustments based on your actual code. For more information, you can check the documentation (https://refine.dev/docs/ui-integrations/ant-design/components/basic-views/show#headerbuttons). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•9mo ago

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

Hide ListButton

Did you find this page helpful?