genetic-orange
genetic-orange4mo 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.
No description
5 Replies
kapa.ai
kapa.ai4mo 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
kapa.ai4mo ago
<@974678785096056842> kapa.ai is still learning and improving, please let us know how it did by reacting below
genetic-orange
genetic-orange4mo ago
@kapa.ai where is the file location the that button? I am using Ant Design.
kapa.ai
kapa.ai4mo 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
kapa.ai4mo ago
<@974678785096056842> kapa.ai is still learning and improving, please let us know how it did by reacting below