diff --git a/ui/src/admin/components/RoleRow.js b/ui/src/admin/components/RoleRow.js
index cae6d7c7a1..d851e09e28 100644
--- a/ui/src/admin/components/RoleRow.js
+++ b/ui/src/admin/components/RoleRow.js
@@ -7,7 +7,7 @@ import classnames from 'classnames'
 import RoleEditingRow from 'src/admin/components/RoleEditingRow'
 import MultiSelectDropdown from 'shared/components/MultiSelectDropdown'
 import ConfirmOrCancel from 'shared/components/ConfirmOrCancel'
-import DeleteConfirmTableCell from 'shared/components/DeleteConfirmTableCell'
+import ConfirmButton from 'shared/components/ConfirmButton'
 import {ROLES_TABLE} from 'src/admin/constants/tableSizing'
 
 const RoleRow = ({
@@ -62,6 +62,10 @@ const RoleRow = ({
     )
   }
 
+  const wrappedDelete = () => {
+    onDelete(role)
+  }
+
   return (
     <tr>
       <td style={{width: `${ROLES_TABLE.colName}px`}}>{roleName}</td>
@@ -97,11 +101,15 @@ const RoleRow = ({
           />
         ) : null}
       </td>
-      <DeleteConfirmTableCell
-        onDelete={onDelete}
-        item={role}
-        buttonSize="btn-xs"
-      />
+      <td className="text-right">
+        <ConfirmButton
+          customClass="table--show-on-row-hover"
+          size="btn-xs"
+          type="btn-danger"
+          text="Delete Role"
+          confirmAction={wrappedDelete}
+        />
+      </td>
     </tr>
   )
 }