Add button icon

cultuurnet · Oct 17, 2024 · ee5ef91 · ee5ef91
1 parent 76b7499
commit ee5ef91
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 0 deletions.
diff --git a/src/ui/Button.tsx b/src/ui/Button.tsx
@@ -20,6 +20,7 @@ const BootStrapVariants = {
   SECONDARY_TOGGLE: 'secondary-toggle',
   SUCCESS: 'success',
   DANGER: 'danger',
+  ICON: 'icon',
 } as const;
 
 const ButtonVariants = {
@@ -200,6 +201,47 @@ const customCSS = css`
     }
   }
 
+  &.btn-icon {
+    padding: 0.75rem;
+    border-radius: 50%;
+    width: 2.8rem;
+    height: 2.8rem;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: none;
+    transition: background-color 0.2s ease;
+    position: relative;
+
+    svg {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
+
+    &:hover {
+      background-color: ${getValue('icon.hoverBackgroundColor')};
+    }
+
+    &:focus {
+      background-color: ${getValue('icon.focusBackgroundColor')};
+      animation: pulse 0.3s ease-out;
+
+      @keyframes pulse {
+        0% {
+          transform: scale(1);
+        }
+        50% {
+          transform: scale(1.05);
+        }
+        100% {
+          transform: scale(1);
+        }
+      }
+    }
+  }
+
   .button-spinner {
     height: 1.5rem;
     display: flex;

diff --git a/src/ui/theme.ts b/src/ui/theme.ts
@@ -208,6 +208,10 @@ const theme = {
         hoverBorderColor: colors.red4,
         backgroundColor: '#DD5242',
       },
+      icon: {
+        hoverBackgroundColor: colors.grey4,
+        focusBackgroundColor: colors.grey3,
+      },
     },
     card: {
       boxShadow: {