How to Show And Hide Button Based on a Security Role

Make one solution from https://make.powerapps.com/. Make sure to connect to the right environment from the upper right corner
Navigate to Solutions from the left side and click on New solution
Allocate:

Display Name: Ribbon - Table (Here: Table name is the Display Name of your table)
Publisher

Open Solution. Click on Add existing. Click on Tables.
Search table. Select it. Click on Next
Click Add. Make sure 'Include all objects' and 'Include table metadata' are unchecked.
Add below code in your existing web resource (JScript) or create new one
// A namespace defined for the sample code
// As a best practice, you should always define
// a unique namespace for your libraries
var Person = window.Person || {};
(function () {
"use strict"
var userSettings = Xrm.Utility.getGlobalContext().userSettings;

this.enableCheckAccess = function (_primaryControl) {
var isEnableFormConfirm = false;
try {

if (CheckSpecificRoleWithAUser(userSettings.userId, "System Administrator")) {
isEnableFormConfirm = true;
} else {
isEnableFormConfirm = false;
}
} catch (e) {
this.openAlertDialog("Error from EnableFormConfirm: " + e.message);
}
return isEnableFormConfirm;
}

this.checkSpecificRoleWithAUser = function (_systemUserID, _roleName) {
var userHasRole = false;
try {
var fetchData = {
systemuserid: _systemUserID,
name: _roleName
};
var fetchXml = [
"<fetch version='1.0' output-format='xml-platform' mapping='logical' distinct='true'>",
" <entity name='systemuser'>",
" <attribute name='fullname' />",
" <attribute name='systemuserid' />",
" <order attribute='fullname' descending='false' />",
" <filter type='and'>",
" <condition attribute='systemuserid' operator='eq' value='", fetchData.systemuserid, "'/>",
" </filter>",
" <link-entity name='systemuserroles' from='systemuserid' to='systemuserid' visible='false' intersect='true'>",
" <link-entity name='role' from='roleid' to='roleid' alias='aa'>",
" <filter type='and'>",
" <condition attribute='name' operator='eq' value='", fetchData.name, "'/>",
" </filter>",
" </link-entity>",
" </link-entity>",
" </entity>",
"</fetch>",
].join("");
this.retrieve(globalVariables.WebAPIVersion, "systemusers", fetchXml);
if (globalVariables.Results.length > 0) {
userHasRole = true;
}
} catch (e) {
this.openAlertDialog("Error from CheckSpecificRoleWithAUser: " + e.message);
}
return userHasRole;
};

this.retrieve = function (webAPIVersion, entitysPluralName, fetchXmlQuery) {
try {
var req = new XMLHttpRequest();
req.open(
"GET",
Xrm.Page.context.getClientUrl() +
"/api/data/" + webAPIVersion + "/" + entitysPluralName + "?fetchXml=" +
encodeURIComponent(fetchXmlQuery),
false
);//Sync
req.setRequestHeader("Prefer", 'odata.include-annotations="*"');
req.onreadystatechange = function () {
if (this.readyState === 4) {
req.onreadystatechange = null;
if (this.status === 200) {
var results = JSON.parse(this.response);
globalVariables.Results = results.value;
} else {
alert(this.statusText);
}
}
};
req.send();
} catch (e) {
this.openAlertDialog("Error from Retrieve: " + e.message + ".");
}
}

this.openAlertDialog = function (_text) {
try {
Xrm.Navigation.openAlertDialog(_text);
} catch (e) {
this.openAlertDialog("Error in openAlertDialog: " + e.message + ".");
}
}
}).call(Person);
Open Ribbon Work Bench from XRM Tool Box or from the CRM.
Open the solution which we created earlier
Click on Check access button. Customize command
Add Enable Rule. Add Step. Click on CustomRule
Configure CustomRule
Associate this enable rule with command
Publish your chnages