- building the base modal trigger architecture

src/components/shared/Button.js

@@ -3,17 +3,27 @@ import classNames from "classnames";
 import Loader from "react-loader-spinner";
 import styles from "./Button.module.css";
 
-const Button = ({ text, isLoading, outline, className }) => {
-  const getClasses = classNames(styles.container, className, {
+const Button = ({ title, isLoading, onClick, outline, className }) => {
+  const classes = classNames(styles.container, className, {
     [styles.outline]: outline,
   });
 
+  const handleKeyDown = (e) => {
+    console.log(e.key);
+  };
+
   return (
-    <div className={getClasses}>
+    <div
+      tabIndex="0"
+      role="button"
+      onClick={onClick}
+      className={classes}
+      onKeyDown={handleKeyDown}
+    >
       {isLoading ? (
         <Loader type="ThreeDots" color="#FFF" height={18} width={28} />
       ) : (
-        text
+        title
       )}
     </div>
   );

src/components/shared/Button.module.css

@@ -1,12 +1,16 @@
 .container {
   padding: 6px 24px;
-  @apply flex items-center cursor-pointer inline-flex rounded font-semibold bg-primary text-inverse;
+  @apply cursor-pointer inline-flex rounded font-semibold bg-primary border border-primary text-inverse;
 }
 
 .container:hover {
   @apply bg-primary-dark;
 }
 
+.container:focus {
+  @apply outline-none;
+}
+
 .container.outline {
   @apply border border-primary bg-inverse text-primary;
 }