other-emerald
other-emerald4mo 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
kapa.ai4mo 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
kapa.ai4mo ago
<@490961337896402944> kapa.ai is still learning and improving, please let us know how it did by reacting below
other-emerald
other-emeraldOP4mo ago
@kapa.ai only the delete button should be shown
kapa.ai
kapa.ai4mo 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>
);
};
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 include only the DeleteButton:
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
kapa.ai4mo ago
<@490961337896402944> kapa.ai is still learning and improving, please let us know how it did by reacting below