fair-rose
fair-rose3y ago

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
absent-sapphire
absent-sapphire3y 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
fair-rose
fair-roseOP3y ago
Cool!! 😀 Thanks @alicanerdurmaz.
absent-sapphire
absent-sapphire3y ago
Your welcome 🙏
deep-jade
deep-jade2y ago
Is there a way to go back to the list page but adding query params for example ?

Did you find this page helpful?