deep-jade•6mo ago

how to add a custom button in the Show header buttons along with the refresh button

I have a show view with its buttons for delete, go back and refresh. I want to add a new one to open a modal. how can I add it without removing the other buttons?

2 Replies

kapa.ai•6mo ago

Hi @Jaoc1811. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- You can add a custom button in the Show header buttons without removing the existing buttons by using the headerButtons property. This property accepts React.ReactNode or a render function which you can use to keep the existing buttons and add your own. Here is an example of how you can do it:

import { Show } from "@refinedev/mantine"; // or "@refinedev/mui", "@refinedev/antd", "@refinedev/chakra-ui" depending on the UI library you are using
import { Button } from "@mantine/core"; // or "@mui/material", "antd", "@chakra-ui/react" depending on the UI library you are using

const PostShow: React.FC = () => {
 return (
 <Show
 headerButtons={({ defaultButtons }) => (
 <>
 {defaultButtons}
 <Button variant="outline" type="primary">
 Custom Button
 </Button>
 </>
 )}
 >
 {/* Rest of your Show component */}
 </Show>
 );
};

import { Show } from "@refinedev/mantine"; // or "@refinedev/mui", "@refinedev/antd", "@refinedev/chakra-ui" depending on the UI library you are using
import { Button } from "@mantine/core"; // or "@mui/material", "antd", "@chakra-ui/react" depending on the UI library you are using

const PostShow: React.FC = () => {
 return (
 <Show
 headerButtons={({ defaultButtons }) => (
 <>
 {defaultButtons}
 <Button variant="outline" type="primary">
 Custom Button
 </Button>
 </>
 )}
 >
 {/* Rest of your Show component */}
 </Show>
 );
};

In this example, {defaultButtons} represents the existing buttons, and the Button component is your custom button. You can replace the Button component with your own custom button component. Please note that the import statements and the Button component may vary depending on the UI library you are using. For more information, you can refer to the following documentation: - Mantine Show Component (https://refine.dev/docs/ui-integrations/mantine/components/basic-views/show#headerbuttons) - Material-UI Show Component (https://refine.dev/docs/ui-integrations/material-ui/components/basic-views/show#headerbuttons) - Ant Design Show Component (https://refine.dev/docs/ui-integrations/ant-design/components/basic-views/show#headerbuttons) - Chakra UI Show Component (https://refine.dev/docs/ui-integrations/chakra-ui/components/basic-views/show#headerbuttons) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•6mo ago

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