foreign-sapphire•2y 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.

4 Replies

deep-jade•2y 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

foreign-sapphire•2y ago

Cool!! 😀 Thanks @alicanerdurmaz.

deep-jade•2y ago

Your welcome 🙏

stormy-gold•12mo ago

Is there a way to go back to the list page but adding query params for example ?