Add header button conditionally to antd show component

How can I add a header button to antd show component based on a if else statement

5 Replies

Hi @ahnaf1022. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

kapa.ai•2y ago

---------------------- You can add a header button to the antd Show component based on an if-else statement by using the headerButtons property. This property accepts a React.ReactNode or a render function ({ defaultButtons }) => React.ReactNode. You can use this render function to conditionally render your custom button based on your if-else statement. Here's an example:

import { Show } from "@refinedev/antd";
import { Button } from "antd";

const PostShow: React.FC = () => {
  const condition = true; // Replace this with your condition

  return (
    <Show
      headerButtons={({ defaultButtons }) => (
        <>
          {defaultButtons}
          {condition ? (
            <Button type="primary">Custom Button</Button>
          ) : (
            <Button type="default">Another Button</Button>
          )}
        </>
      )}
    >
      <p>Rest of your page here</p>
    </Show>
  );
};

import { Show } from "@refinedev/antd";
import { Button } from "antd";

const PostShow: React.FC = () => {
  const condition = true; // Replace this with your condition

  return (
    <Show
      headerButtons={({ defaultButtons }) => (
        <>
          {defaultButtons}
          {condition ? (
            <Button type="primary">Custom Button</Button>
          ) : (
            <Button type="default">Another Button</Button>
          )}
        </>
      )}
    >
      <p>Rest of your page here</p>
    </Show>
  );
};

In this example, the condition variable represents your if-else statement. Replace it with your own condition. The custom button will be rendered based on the value of the condition variable. Refer to the documentation (https://refine.dev/docs/api-reference/antd/components/basic-views/show) for more information on the headerButtons property. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

Show | refine

`` provides us a layout for displaying the page. It does not contain any logic but adds extra functionalities like a refresh button or giving title to the page.

kapa.ai•2y ago

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

vicious-gold•2y ago

I didn't quite understand what you meant. Did the answer above help you?

sensitive-blueOP•2y ago

Yeah it solved the problem. Also, can you please check my other question at https://discord.com/channels/837692625737613362/1092166377953054801. I couldn't get kapa.ai's solution to work

Discord

Discord - A New Way to Chat with Friends & Communities

Discord is the easiest way to communicate over voice, video, and text. Chat, hang out, and stay close with your friends and communities.

Add header button conditionally to antd show component

Did you find this page helpful?