Hide a button with control access

How to hide a button using accessControl prop

5 Replies

Hi @Sly. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- In refine, you can hide a button using the accessControl prop. This prop can be used to skip the access control check with its enabled property or to hide the button when the user does not have the permission to access the resource with hideIfUnauthorized property. This is relevant only when an accessControlProvider is provided to <Refine/>. Here is an example of how to use the accessControl prop to hide a button:

import { ShowButton } from "@refinedev/chakra-ui";  
  
export const MyListComponent = () => {  
 return <ShowButton accessControl={{ enabled: true, hideIfUnauthorized: true }} />;  
};

import { ShowButton } from "@refinedev/chakra-ui";  
  
export const MyListComponent = () => {  
 return <ShowButton accessControl={{ enabled: true, hideIfUnauthorized: true }} />;  
};

In this example, the ShowButton will be hidden if the user does not have the permission to access the resource. The enabled property is set to true to skip the access control check. You can replace ShowButton with any other button component like CreateButton, CloneButton, ListButton, EditButton, or DeleteButton based on your requirement. Please note that the accessControl prop is available in both Chakra UI and Material UI integrations of refine. For more information, you can refer to the refine documentation (https://refine.dev/docs). Please replace @refinedev/chakra-ui with @refinedev/mui if you are using Material UI. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•6mo ago

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

optimistic-gold•6mo ago

@kapa.ai It will not work in Ant design?

kapa.ai•6mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- I'm sorry for the confusion, but the information extracts provided do not include specific details about using the accessControl prop with Ant Design in refine. However, refine does provide an integration package for Ant Design, which includes a set of ready-to-use components and hooks that connect Refine with Ant Design components. For more specific information on how to use access control with Ant Design in refine, I recommend checking the official 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

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