How to show and hide button bases on logged in security role?

Hi friends,

I created one button, "test button". I wanna show button for system customizer role and hide for sales person role. I dont know how to show and hide button based on roles. i have written web api to retrive roles, it is fine but i tried enable roles, still i am able to see test button with sales person role. please help me to achieve this.

Thanks,

Bharath

============================

this is the code i have written, it returns roles successfully

var name;
function roles()
{
var userRoles = Xrm.Page.context.getUserRoles();
for (var i = 0; i < userRoles.length; i++)
{
var userRole = userRoles[i]; // returns the Role Id
alert(userRole);

debugger;
var req = new XMLHttpRequest();
req.open("GET", Xrm.Page.context.getClientUrl() + "/api/data/v8.2/roles?$select=name&$filter=roleid eq " + userRole+ "", true);
req.setRequestHeader("OData-MaxVersion", "4.0");
req.setRequestHeader("OData-Version", "4.0");
req.setRequestHeader("Accept", "application/json");
req.setRequestHeader("Content-Type", "application/json; charset=utf-8");
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);
for (var i = 0; i < results.value.length; i++) {
name = results.value[i]["name"];
alert(name);
if (name == 'System Administrator')
{
return true;

}
else
{
return false;
}
Xrm.Page.ui.refreshRibbon();

}
} else {
Xrm.Utility.alertDialog(this.statusText);
}
}
};
req.send();
}
}