diff --git a/src/components/ActionIcon/ActionIcon.jsx b/src/components/ActionIcon/ActionIcon.jsx
index 9775460..8042277 100644
--- a/src/components/ActionIcon/ActionIcon.jsx
+++ b/src/components/ActionIcon/ActionIcon.jsx
@@ -9,6 +9,7 @@ import classes from "./ActionIcon.module.css";
  * @property {"filled" | "subtle" | "transparent"} [variant]
  * @property {"primary" | "secondary" | "danger" | "warn" | "success" | "info"} [color]
  * @property {string[]} [additionalClasses]
+ * @property {boolean} [disabled]
  * @property {JSX.EventHandler<HTMLButtonElement, PointerEvent>} [onClick]
  */
 
@@ -22,6 +23,7 @@ export default function ActionIcon(props) {
       color: "secondary",
       variant: "transparent",
       additionalClasses: [],
+      disabled: false,
       onClick: (e) => {},
     },
     props
@@ -35,6 +37,7 @@ export default function ActionIcon(props) {
         prop(`color-${mergedProps.color}`, classes),
         ...mergedProps.additionalClasses
       )}
+      disabled={mergedProps.disabled}
       onClick={mergedProps.onClick}
     >
       {mergedProps.children}
diff --git a/src/components/ActionIcon/ActionIcon.module.css b/src/components/ActionIcon/ActionIcon.module.css
index 5731f2f..dfae743 100644
--- a/src/components/ActionIcon/ActionIcon.module.css
+++ b/src/components/ActionIcon/ActionIcon.module.css
@@ -1,3 +1,5 @@
+@import "@/mixins.css";
+
 .action-icon-button {
   --size: calc(var(--border-radius-xxs) * 2);
   border: none;
@@ -18,12 +20,34 @@
       &.variant-transparent {
         color: var(--color-#{$color});
         background-color: transparent;
+        &[disabled] {
+          color: var(--palette-gray-4);
+          @include dark-mode {
+            color: var(--palette-gray-8);
+          }
+        }
       }
       &.variant-subtle {
         background-color: color-mod(var(--color-#{$color}) a(50%));
+        &[disabled] {
+          color: var(--palette-gray-4);
+          background-color: color-mod(var(--palette-gray-6) a(50%));
+          @include dark-mode {
+            color: var(--palette-gray-8);
+            background-color: color-mod(var(--palette-gray-6) a(50%));
+          }
+        }
       }
       &.variant-fill {
         background-color: var(--color-#{$color});
+        &[disabled] {
+          color: var(--palette-gray-4);
+          background-color: var(--palette-gray-6);
+          @include dark-mode {
+            color: var(--palette-gray-8);
+            background-color: var(--palette-gray-6);
+          }
+        }
       }
       &:hover {
         color: var(--palette-white-0);
@@ -48,4 +72,9 @@
       }
     }
   }
+  &[disabled] {
+    border: none;
+    background: none;
+    pointer-events: none;
+  }
 }