diff --git a/.changeset/solid-badgers-fall.md b/.changeset/solid-badgers-fall.md
new file mode 100644
index 0000000000..fbd21eca8b
--- /dev/null
+++ b/.changeset/solid-badgers-fall.md
@@ -0,0 +1,10 @@
+---
+'@sl-design-system/paginator': patch
+'@sl-design-system/button': patch
+---
+
+Fix paginator page-state styling and align selected/non-selected interaction states with design tokens.
+
+Paginator now drives page button colors via dedicated `--sl-button-*` CSS variables, including hover/active state opacity differences for subtle vs bold emphasis.
+
+Button now supports these external style overrides in its background/color rendering with safe fallbacks to internal defaults, enabling parent components (such as paginator) to control state styling without breaking existing behavior.
diff --git a/packages/components/button/src/button.scss b/packages/components/button/src/button.scss
index 3f887b7198..a27f5d96e2 100644
--- a/packages/components/button/src/button.scss
+++ b/packages/components/button/src/button.scss
@@ -109,7 +109,7 @@
 }
 
 :host(:is(:not([fill]), [fill='ghost'], [fill='link'], [fill='solid'])) button {
-  border-color: transparent;
+  border-color: var(--sl-button-border-color, transparent);
 }
 
 :host([fill='ghost']) button {
@@ -230,14 +230,18 @@ button {
 
   align-items: center;
   appearance: none;
+
+  // Allows parent components (e.g. paginator) to drive button interaction colors via --sl-button-*,
+  // while keeping the internal defaults as fallback.
   background: color-mix(
     in srgb,
-    var(--_bg-color),
-    var(--_bg-mix-color) calc(100% * var(--_bg-opacity))
+    var(--sl-button-bg-color, var(--_bg-color)),
+    var(--sl-button-bg-mix-color, var(--_bg-mix-color))
+      calc(100% * var(--sl-button-bg-opacity, var(--_bg-opacity)))
   );
   border: var(--sl-size-borderWidth-action) solid var(--sl-color-border-secondary-bold);
   border-radius: var(--sl-size-borderRadius-default);
-  color: var(--sl-color-foreground-secondary-bold);
+  color: var(--sl-button-color, var(--sl-color-foreground-secondary-bold));
   cursor: pointer;
   display: inline-flex;
   flex: 1;
@@ -258,10 +262,12 @@ button {
   }
 
   &:hover {
+    --sl-button-bg-opacity: var(--sl-button-bg-opacity-hover, var(--_bg-opacity));
     --_bg-opacity: var(--sl-opacity-interactive-bold-hover);
   }
 
   &:active {
+    --sl-button-bg-opacity: var(--sl-button-bg-opacity-active, var(--_bg-opacity));
     --_bg-opacity: var(--sl-opacity-interactive-bold-active);
   }
 
diff --git a/packages/components/paginator/src/paginator.scss b/packages/components/paginator/src/paginator.scss
index 5f33014066..a569909d34 100644
--- a/packages/components/paginator/src/paginator.scss
+++ b/packages/components/paginator/src/paginator.scss
@@ -30,8 +30,14 @@
 }
 
 .page {
+  --sl-button-bg-color: transparent;
+  --sl-button-bg-mix-color: var(--sl-color-background-neutral-interactive-plain);
+  --sl-button-bg-opacity: var(--sl-opacity-interactive-plain-idle);
+  --sl-button-bg-opacity-hover: var(--sl-opacity-interactive-plain-hover);
+  --sl-button-bg-opacity-active: var(--sl-opacity-interactive-plain-active);
+  --sl-button-color: var(--sl-color-foreground-neutral-bold);
+
   box-sizing: border-box;
-  color: var(--sl-color-foreground-neutral-bold);
   flex-shrink: 0;
   inline-size: calc(1lh + (var(--sl-size-100) * 2));
   padding-inline: 0;
@@ -50,30 +56,23 @@
 }
 
 .current {
-  --_bg-color: var(--sl-color-background-selected-subtle);
-  --_bg-mix-color: var(--sl-color-background-primary-interactive-plain);
-  --_bg-opacity: var(--sl-opacity-interactive-plain-idle);
-
-  color: var(--sl-color-foreground-primary-bold);
-
-  &:hover {
-    --_bg-opacity: var(--sl-opacity-interactive-plain-hover);
-  }
-
-  &:active {
-    --_bg-opacity: var(--sl-opacity-interactive-plain-active);
-  }
+  --sl-button-bg-color: transparent;
+  --sl-button-bg-mix-color: var(--sl-color-background-primary-interactive-plain);
+  --sl-button-bg-opacity: var(--sl-opacity-interactive-plain-idle);
+  --sl-button-bg-opacity-hover: var(--sl-opacity-interactive-plain-hover);
+  --sl-button-bg-opacity-active: var(--sl-opacity-interactive-plain-active);
+  --sl-button-border-color: var(--sl-color-border-selected);
+  --sl-button-color: var(--sl-color-foreground-primary-bold);
 }
 
 :host([emphasis='bold']) .current {
-  --_bg-color: var(--sl-color-background-selected-bold);
-  --_bg-mix-color: var(--sl-color-background-selected-interactive-bold);
-
-  color: var(--sl-color-foreground-primary-onBold);
-}
-
-:host([emphasis='bold']) .current:not(:hover, :active) {
-  --_bg-opacity: var(--sl-opacity-interactive-bold-idle);
+  --sl-button-bg-color: var(--sl-color-background-selected-bold);
+  --sl-button-bg-mix-color: var(--sl-color-background-selected-interactive-bold);
+  --sl-button-border-color: transparent;
+  --sl-button-color: var(--sl-color-foreground-primary-onBold);
+  --sl-button-bg-opacity: var(--sl-opacity-interactive-bold-idle);
+  --sl-button-bg-opacity-hover: var(--sl-opacity-interactive-bold-hover);
+  --sl-button-bg-opacity-active: var(--sl-opacity-interactive-bold-active);
 }
 
 .wrapper {