diff --git a/.Jules/palette.md b/.Jules/palette.md
new file mode 100644
index 00000000..2bc916a4
--- /dev/null
+++ b/.Jules/palette.md
@@ -0,0 +1,3 @@
+## 2024-05-18 - Adding accessibility to Button loading states
+**Learning:** Loading states inside accessible interactive elements (like custom buttons) should communicate properly using `aria-busy` and hiding decorative loading spin icons via `aria-hidden` to avoid repetitive screen reader announcements.
+**Action:** When adding accessible loading states to buttons, always apply `aria-busy={true}` to the button element and `aria-hidden="true"` to any decorative icon rendering the loading animation.
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
index 0757f7f5..8f8caab5 100644
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@@ -10,8 +10,7 @@ import { useHaptic } from '@/hooks/use-haptic'
 import { buttonVariants } from './button-variants'
 
 export interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof buttonVariants> {
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
   asChild?: boolean
   isLoading?: boolean
 }
@@ -33,7 +32,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
 
     const content = showLoader ? (
       <>
-        <Loader2 className="animate-spin" />
+        <Loader2 className="animate-spin" aria-hidden="true" />
         {children}
       </>
     ) : (
@@ -46,6 +45,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
         ref={ref}
         disabled={isLoading || props.disabled}
         onClick={handleClick}
+        aria-busy={isLoading ? 'true' : undefined}
         {...props}
       >
         {content}