other-emerald•6mo ago

'Create' button location

Hi, Where is the file location of the 'Create' button (blue color) as in the picture? I want to learn on how to hide it. Thank you.

5 Replies

kapa.ai•6mo ago

Hi @uwais. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The 'Create' button is part of the Refine framework and its visibility can be controlled using the hideText property. When hideText is set to true, only the button icon is visible. Here is an example of how to hide the text of the 'Create' button:

import { CreateButton } from "@refinedev/antd";  // or "@refinedev/mui", "@refinedev/mantine", "@refinedev/chakra-ui" depending on the UI library you are using
  
const MyCreateComponent = () => {  
 return (  
 <CreateButton  
 hideText={true}  
 />  
 );  
};

import { CreateButton } from "@refinedev/antd";  // or "@refinedev/mui", "@refinedev/mantine", "@refinedev/chakra-ui" depending on the UI library you are using
  
const MyCreateComponent = () => {  
 return (  
 <CreateButton  
 hideText={true}  
 />  
 );  
};

Please note that the import statement will depend on the UI library you are using. The example above uses Ant Design, but you can replace @refinedev/antd with @refinedev/mui for Material-UI, @refinedev/mantine for Mantine, or @refinedev/chakra-ui for Chakra UI. For more information, you can refer to the documentation: - Ant Design (https://refine.dev/docs/ui-integrations/ant-design/components/buttons/create-button#hidetext) - Material-UI (https://refine.dev/docs/ui-integrations/material-ui/components/buttons/create-button#hidetext) - Mantine (https://refine.dev/docs/ui-integrations/mantine/components/buttons/create-button#hidetext) - Chakra UI (https://refine.dev/docs/ui-integrations/chakra-ui/components/buttons/create-button#hidetext) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•6mo ago

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

other-emerald•6mo ago

@kapa.ai where is the file location the that button? I am using Ant Design.

kapa.ai•6mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- The 'Create' button is a component provided by the Refine framework and it's not located in a specific file in your project. It's part of the @refinedev/antd package that you install when you set up your project. If you want to customize or hide the 'Create' button, you can do so by using the properties of the <CreateButton> component or by using it in combination with other components like <List> or <Create>. For example, if you want to hide the 'Create' button in a list view, you can use the canCreate property of the <List> component:

import { List } from "@refinedev/antd";  
import { usePermissions } from "@refinedev/core";  
  
const PostList: React.FC = () => {  
 const { data: permissionsData } = usePermissions();  
 return (  
 <List  
 canCreate={permissionsData?.includes("admin")}  
 createButtonProps={{ size: "small" }}  
 >  
 <p>Rest of your page here</p>  
 </List>  
 );  
};

import { List } from "@refinedev/antd";  
import { usePermissions } from "@refinedev/core";  
  
const PostList: React.FC = () => {  
 const { data: permissionsData } = usePermissions();  
 return (  
 <List  
 canCreate={permissionsData?.includes("admin")}  
 createButtonProps={{ size: "small" }}  
 >  
 <p>Rest of your page here</p>  
 </List>  
 );  
};

In this example, the 'Create' button will only be visible if the user has 'admin' permissions. You can adjust the condition inside canCreate to suit your needs. For more information, you can refer to the Refine documentation (https://refine.dev/docs). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•6mo ago

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