back button in list page beside title

I need a back button in list page beside title

5 Replies

kapa.ai•14mo ago

Hi @alfaz_muhammed. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Refine provides a way to customize the back button in its Show and Create components using the goBack property. However, the extracts do not provide specific information on how to add a back button beside the title on a list page. Here's how you can customize the back button in Show and Create components: For Show component:

import { Show } from "@refinedev/mui";  
import { Button } from "@mui/material";  
import { useBack } from "@refinedev/core";  
  
const BackButton = () => {  
 const goBack = useBack();  
  
 return <Button onClick={() => goBack()}>BACK!</Button>;  
};  
  
const PostShow: React.FC = () => {  
 return (  
 <Show  
 goBack={<BackButton />}  
 >  
 <span>Rest of your page here</span>  
 </Show>  
 );  
};

import { Show } from "@refinedev/mui";  
import { Button } from "@mui/material";  
import { useBack } from "@refinedev/core";  
  
const BackButton = () => {  
 const goBack = useBack();  
  
 return <Button onClick={() => goBack()}>BACK!</Button>;  
};  
  
const PostShow: React.FC = () => {  
 return (  
 <Show  
 goBack={<BackButton />}  
 >  
 <span>Rest of your page here</span>  
 </Show>  
 );  
};

Source (https://refine.dev/docs/api-reference/mui/components/basic-views/show) For Create component:

import { Create } from "@refinedev/antd";  
  
const PostCreate: React.FC = () => {  
 const BackButton = () => <Button>←</Button>;  
 return (  
 <Create goBack={<BackButton />}>  
 <p>Rest of your page here</p>  
 </Create>  
 );  
};

import { Create } from "@refinedev/antd";  
  
const PostCreate: React.FC = () => {  
 const BackButton = () => <Button>←</Button>;  
 return (  
 <Create goBack={<BackButton />}>  
 <p>Rest of your page here</p>  
 </Create>  
 );  
};

Source (https://refine.dev/docs/api-reference/antd/components/basic-views/create) For adding a back button on a list page, you might need to customize the list component. Unfortunately, the provided extracts do not contain information on how to do this. I recommend checking the Refine documentation (https://refine.dev/docs) for more details. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•14mo ago

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

foreign-sapphire•14mo ago

@kapa.ai in the title prop of list, does it returns the current title as callback so I can modify the title

kapa.ai•14mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- The title prop in the List component of Refine allows you to set a custom title. However, based on the provided extracts, it does not return the current title as a callback. It simply uses the title you provide, or if you don't pass a title prop, it uses the plural form of the resource name by default. Here's an example of how you can set a custom title in the List component:

import { List } from "@refinedev/mui";  
import { Typography } from "@mui/material";  
  
const ListPage: React.FC = () => {  
 return (  
 <List  
 title={<Typography variant="h5">Custom Title</Typography>}  
 >  
 <span>Rest of your page here</span>  
 </List>  
 );  
};

import { List } from "@refinedev/mui";  
import { Typography } from "@mui/material";  
  
const ListPage: React.FC = () => {  
 return (  
 <List  
 title={<Typography variant="h5">Custom Title</Typography>}  
 >  
 <span>Rest of your page here</span>  
 </List>  
 );  
};

Source (https://refine.dev/docs/api-reference/mui/components/basic-views/list) If you want to modify the title based on some conditions or states, you can do so within the title prop:

import { List } from "@refinedev/mui";  
import { Typography } from "@mui/material";  
  
const ListPage: React.FC = () => {  
 const customTitle = "Custom Title"; // Modify this based on your conditions or states
 return (  
 <List  
 title={<Typography variant="h5">{customTitle}</Typography>}  
 >  
 <span>Rest of your page here</span>  
 </List>  
 );  
};

import { List } from "@refinedev/mui";  
import { Typography } from "@mui/material";  
  
const ListPage: React.FC = () => {  
 const customTitle = "Custom Title"; // Modify this based on your conditions or states
 return (  
 <List  
 title={<Typography variant="h5">{customTitle}</Typography>}  
 >  
 <span>Rest of your page here</span>  
 </List>  
 );  
};

For more advanced usage, you might need to check the Refine documentation (https://refine.dev/docs) or their API references. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•14mo ago

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