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
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:
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:
----------------------<@110864105035808768> kapa.ai is still learning and improving, please let us know how it did by reacting below