How to change the label and icon of the default button that goes back to list in Show

In the attached example, instead of "POSTS" I want it to be "Back to List" with different icon. Thank you. https://refine.dev/docs/api-reference/mui/components/basic-views/show/
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.
No description
4 Replies
stormy-gold
stormy-gold2y ago
Hi @Jams, You can give custom ReactNode to <Show>'s headerButtons
import {
Button,
EditButton,
DeleteButton,
RefreshButton,
} from '@pankod/refine-mui';

import {
useNavigation,
} from "@pankod/refine-core";



const { list } = useNavigation();

headerButtons={() => (
<>
<Button onClick={(): void =>
list("posts")
}>
<- Back to List
</Button>
<EditButton />
<DeleteButton />
<RefreshButton />
</>
import {
Button,
EditButton,
DeleteButton,
RefreshButton,
} from '@pankod/refine-mui';

import {
useNavigation,
} from "@pankod/refine-core";



const { list } = useNavigation();

headerButtons={() => (
<>
<Button onClick={(): void =>
list("posts")
}>
<- Back to List
</Button>
<EditButton />
<DeleteButton />
<RefreshButton />
</>
full example https://stackblitz.com/edit/refinedev-refine-q4lakf?file=src/pages/posts/show.tsx
extended-yellow
extended-yellow2y ago
Cool!! 😀 Thanks @alicanerdurmaz.
stormy-gold
stormy-gold2y ago
Your welcome 🙏
wise-white
wise-white10mo ago
Is there a way to go back to the list page but adding query params for example ?