diff --git a/packages/loopover-ui-kit/src/components/pagination.test.tsx b/packages/loopover-ui-kit/src/components/pagination.test.tsx
new file mode 100644
index 0000000000..83c7873e3e
--- /dev/null
+++ b/packages/loopover-ui-kit/src/components/pagination.test.tsx
@@ -0,0 +1,49 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+
+import {
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+} from "./pagination";
+
+// Regression for #8307: PaginationLink (and PaginationPrevious/PaginationNext built on it) render an <a>,
+// which has no native disabled attribute — a consumer-supplied aria-disabled must produce a real
+// visual/interaction cue via the aria-disabled: Tailwind variant, matching sidebar.tsx/calendar.tsx.
+describe("PaginationLink aria-disabled styling (#8307)", () => {
+  it("carries the aria-disabled: dim + pointer-events classes when aria-disabled is set", () => {
+    render(
+      <PaginationLink aria-disabled="true" aria-label="prev">
+        1
+      </PaginationLink>,
+    );
+    const link = screen.getByLabelText("prev");
+    expect(link.className).toContain("aria-disabled:pointer-events-none");
+    expect(link.className).toContain("aria-disabled:opacity-50");
+  });
+
+  it("PaginationPrevious/PaginationNext inherit the aria-disabled styling from PaginationLink", () => {
+    render(
+      <nav>
+        <PaginationPrevious aria-disabled="true" />
+        <PaginationNext aria-disabled="true" />
+      </nav>,
+    );
+    for (const label of ["Go to previous page", "Go to next page"]) {
+      const el = screen.getByLabelText(label);
+      expect(el.className).toContain("aria-disabled:pointer-events-none");
+      expect(el.className).toContain("aria-disabled:opacity-50");
+    }
+  });
+
+  it("still renders (unchanged aria-current behavior) and the classes are present regardless — the variant only applies when aria-disabled is truthy at runtime", () => {
+    render(
+      <PaginationLink isActive aria-label="active">
+        2
+      </PaginationLink>,
+    );
+    const link = screen.getByLabelText("active");
+    // isActive/aria-current is untouched by this fix.
+    expect(link.getAttribute("aria-current")).toBe("page");
+  });
+});
diff --git a/packages/loopover-ui-kit/src/components/pagination.tsx b/packages/loopover-ui-kit/src/components/pagination.tsx
index 1910a3006b..cae9d498c2 100644
--- a/packages/loopover-ui-kit/src/components/pagination.tsx
+++ b/packages/loopover-ui-kit/src/components/pagination.tsx
@@ -52,6 +52,9 @@ const PaginationLink = ({
         variant: isActive ? "outline" : "ghost",
         size,
       }),
+      // An <a> has no native disabled attribute, so a consumer-supplied aria-disabled needs an explicit
+      // visual/interaction cue -- mirrors the aria-disabled: styling sidebar.tsx/calendar.tsx already use.
+      "aria-disabled:pointer-events-none aria-disabled:opacity-50",
       className,
     )}
     {...props}