Fix icon button disabled state

src/components/IconButton.vue

@@ -7,6 +7,7 @@
     :open-on-hover="tooltipOnHover"
     :offset="tooltipOffset"
     :disabled="!tooltipText || !showTooltip"
+    :class="['icon-button-v-tooltip', disabled ? 'disabled-tooltip' : '']"
   >
     <template v-slot:activator="{ props }: { props: Record<string,any> }">
       <div
@@ -19,6 +20,7 @@
         @touchend="handleTouchEnd"
         :style="cssVars"
         tabindex="0"
+        :aria-disabled="disabled"
       >
         <slot name="button">
           <font-awesome-icon
@@ -64,7 +66,8 @@ const props = withDefaults(defineProps<IconButtonProps>(), {
   tooltipOffset: 0,
   showTooltip: true,
   faSize: "lg",
-  mdSize: "1.25em"
+  mdSize: "1.25em",
+  disabled: false,
 });
 
 const emit = defineEmits<{
@@ -99,6 +102,9 @@ function updateValue() {
 }
 
 function handleAction() {
+  if (props.disabled) {
+    return;
+  }
   updateValue();
   emit('activate');
 }
@@ -144,5 +150,17 @@ function handleTouchEnd() {
     color: var(--active-color);
     border-color: var(--active-color);
   }
+
+  &[aria-disabled="true"]:hover {
+    cursor: not-allowed;
+  }
+}
+
+.icon-button-v-tooltip {
+
+  &.disabled-tooltip .v-overlay__content {
+    color: rgb(156, 156, 156); // fallback grey color for disabled state
+    color: color-mix(in hsl, currentColor, rgb(var(--v-theme-on-surface-variant)) 80%);
+  }
 }
 </style>

src/stories/IconButton.stories.ts

@@ -7,6 +7,8 @@ import { IconButton } from "..";
 import { library } from "@fortawesome/fontawesome-svg-core";
 import { faBookOpen } from "@fortawesome/free-solid-svg-icons";
 
+import "./stories.css";
+
 library.add(faBookOpen);
 
 const meta: Meta<typeof IconButton> = {
@@ -36,6 +38,7 @@ export const Primary: Story = {
     mdIcon: null,
     color: "white",
     focusColor: "red",
+    activeColor: "green",
     backgroundColor: "#040404",
     boxShadow: true,
     border: true,
@@ -47,6 +50,7 @@ export const Primary: Story = {
     tooltipOnHover: true,
     showTooltip: true,
     faSize: "lg",
-    mdSize: "100px"
+    mdSize: "100px",
+    disabled: false,
   }
 };

src/types.ts

@@ -160,6 +160,8 @@ export interface IconButtonProps {
   faSize?: SizeType;
   /** The size of the MDI icon. Should be a valid CSS size */
   mdSize?: string;
+  /** Disable the button and prevent actions from running: Default is false */
+  disabled?: boolean;
 }