diff --git a/app/components/form/fields/DateTimeRangePicker.spec.tsx b/app/components/form/fields/DateTimeRangePicker.spec.tsx
index dd418db2de..149f13ae11 100644
--- a/app/components/form/fields/DateTimeRangePicker.spec.tsx
+++ b/app/components/form/fields/DateTimeRangePicker.spec.tsx
@@ -76,8 +76,8 @@ describe('custom mode', () => {
 
     expect(onChange).not.toBeCalled()
     expect(screen.getByLabelText('Start time')).toBeEnabled()
-    expect(screen.getByRole('button', { name: 'Reset' })).toBeDisabled()
-    expect(screen.getByRole('button', { name: 'Load' })).toBeDisabled()
+    expect(screen.getByRole('button', { name: 'Reset' })).toHaveClass('visually-disabled')
+    expect(screen.getByRole('button', { name: 'Load' })).toHaveClass('visually-disabled')
   })
 
   it('clicking load after changing date changes range', async () => {
diff --git a/libs/ui/lib/button/Button.tsx b/libs/ui/lib/button/Button.tsx
index 9c845d775d..66e882ee22 100644
--- a/libs/ui/lib/button/Button.tsx
+++ b/libs/ui/lib/button/Button.tsx
@@ -1,4 +1,5 @@
 import cn from 'classnames'
+import type { MouseEventHandler } from 'react'
 import { forwardRef } from 'react'
 
 import { Spinner } from '@oxide/ui'
@@ -90,18 +91,45 @@ export const buttonStyle = ({
   )
 }
 
+/**
+ * When the `disabled` prop is passed to the button we put it in a visually disabled state.
+ * In that case we want to override the default mouse down and click behavior to simulate a
+ * disabled state.
+ */
+const noop: MouseEventHandler<HTMLButtonElement> = (e) => {
+  e.stopPropagation()
+  e.preventDefault()
+}
+
 // Use `forwardRef` so the ref points to the DOM element (not the React Component)
 // so it can be focused using the DOM API (eg. this.buttonRef.current.focus())
 export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
   (
-    { children, size, variant, color, className, loading, innerClassName, ...rest },
+    {
+      children,
+      size,
+      variant,
+      color,
+      className,
+      loading,
+      innerClassName,
+      disabled,
+      onClick,
+      'aria-disabled': ariaDisabled,
+      ...rest
+    },
     ref
   ) => {
     return (
       <button
-        className={cn(buttonStyle({ size, variant, color }), className)}
+        className={cn(buttonStyle({ size, variant, color }), className, {
+          'visually-disabled': disabled,
+        })}
         ref={ref}
         type="button"
+        onMouseDown={disabled ? noop : undefined}
+        onClick={disabled ? noop : onClick}
+        aria-disabled={disabled || ariaDisabled}
         {...rest}
       >
         <>
diff --git a/libs/ui/lib/button/button.css b/libs/ui/lib/button/button.css
index 6d9a3a8f54..303397e3ca 100644
--- a/libs/ui/lib/button/button.css
+++ b/libs/ui/lib/button/button.css
@@ -4,7 +4,8 @@
 .btn-primary {
   @apply text-accent bg-accent-secondary hover:bg-accent-secondary-hover disabled:text-accent-disabled disabled:bg-accent-secondary;
 }
-.btn-primary:disabled > .spinner {
+.btn-primary:disabled > .spinner,
+.btn-primary.visually-disabled > .spinner {
   @apply text-accent;
 }
 
@@ -12,21 +13,24 @@
 .btn-secondary-solid {
   @apply text-secondary bg-secondary hover:bg-secondary-hover disabled:text-quaternary disabled:bg-secondary;
 }
-.btn-secondary-solid:disabled > .spinner {
+.btn-secondary-solid:disabled > .spinner,
+.btn-secondary-solid.visually-disabled > .spinner {
   @apply text-secondary;
 }
 
 .btn-destructive {
   @apply text-destructive bg-destructive-secondary hover:bg-destructive-secondary-hover disabled:text-destructive-disabled disabled:bg-destructive-secondary;
 }
-.btn-destructive:disabled > .spinner {
+.btn-destructive:disabled > .spinner,
+.btn-destructive.visually-disabled > .spinner {
   @apply text-destructive;
 }
 
 .btn-notice {
   @apply text-notice bg-notice-secondary hover:bg-notice-secondary-hover disabled:text-notice-disabled disabled:bg-notice-secondary;
 }
-.btn-notice:disabled > .spinner {
+.btn-notice:disabled > .spinner,
+.btn-notice.visually-disabled > .spinner {
   @apply text-notice;
 }
 
diff --git a/tailwind.config.js b/tailwind.config.js
index a3aec16aa1..0973aa5803 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -52,6 +52,7 @@ module.exports = {
       addVariant('children', '& > *')
       addVariant('between', '& > * + *')
       addVariant('selected', '.is-selected &')
+      addVariant('disabled', '&.visually-disabled, &:disabled')
       addUtilities(
         Array.from({ length: 12 }, (_, i) => i)
           .map((i) => ({