Change approach to use Link instead of button for borderless

assets/js/components/CleanUpButton/CleanUpButton.jsx

@@ -1,40 +1,49 @@
 import React from 'react';
 
 import { EOS_CLEANING_SERVICES } from 'eos-icons-react';
-import classNames from 'classnames';
 
 import Button from '@components/Button';
 import Spinner from '@components/Spinner';
 
-function CleanUpButton({ cleaning, onClick, className }) {
-  const buttonClasses = classNames(
-    'inline-block mx-0.5 border-green-500 border w-fit',
-    className
-  );
-
-  return (
-    <Button
-      type="primary-white"
-      className={buttonClasses}
-      size="small"
-      disabled={cleaning}
-      onClick={() => onClick()}
-    >
-      {cleaning === true ? (
-        <Spinner className="justify-center flex" />
-      ) : (
-        <>
-          <EOS_CLEANING_SERVICES
-            size="base"
-            className="fill-jungle-green-500 inline"
-          />
-          <span className="text-jungle-green-500 text-sm font-bold pl-1.5">
-            Clean up
-          </span>
-        </>
-      )}
-    </Button>
-  );
+function CleanUpButton({ cleaning, onClick, noButtonStyle }) {
+  if (noButtonStyle) {
+    return (
+      <a
+        className="cursor-pointer font-bold text-jungle-green-500 hover:opacity-75"
+        onClick={() => onClick()}
+      >
+        <EOS_CLEANING_SERVICES
+          size="base"
+          className="fill-jungle-green-500 inline"
+        />
+        <span className="pl-2">Clean up</span>
+      </a>
+    );
+  } else {
+    return (
+      <Button
+        type="primary-white"
+        className="inline-block mx-0.5 border-green-500 border w-fit"
+        size="small"
+        disabled={cleaning}
+        onClick={() => onClick()}
+      >
+        {cleaning === true ? (
+          <Spinner className="justify-center flex" />
+        ) : (
+          <>
+            <EOS_CLEANING_SERVICES
+              size="base"
+              className="fill-jungle-green-500 inline"
+            />
+            <span className="text-jungle-green-500 text-sm font-bold pl-1.5">
+              Clean up
+            </span>
+          </>
+        )}
+      </Button>
+    );
+  }
 }
 
 export default CleanUpButton;

assets/js/components/CleanUpButton/CleanUpButton.stories.jsx

@@ -13,12 +13,9 @@ export default {
       },
     },
     onClick: { action: 'Click button' },
-    className: {
-      control: 'text',
-      description: 'CSS classes',
-      table: {
-        type: { summary: 'string' },
-      },
+    noButtonStyle: {
+      control: { type: 'boolean' },
+      description: 'Use a link rather than a button',
     },
   },
 };
@@ -34,9 +31,9 @@ export const Cleaning = {
   },
 };
 
-export const NoOutline = {
+export const noButtonStyle = {
   args: {
     ...Default.args,
-    className: 'border-none shadow-none',
+    noButtonStyle: true,
   },
 };

assets/js/components/HostsList.jsx

@@ -192,8 +192,8 @@ function HostsList() {
         render: (content, item) =>
           content && (
             <CleanUpButton
+              noButtonStyle
               cleaning={item.deregistering}
-              className="border-none shadow-none"
               onClick={() => {
                 openDeregistrationModal(item);
               }}