sumup · matoous · Sep 26, 2026 · Sep 26, 2026
diff --git a/src/components/ApiDocs/TopSections.astro b/src/components/ApiDocs/TopSections.astro
@@ -1,12 +1,13 @@
 ---
+import Button from "@components/Button";
 import MarkdownContent from "@components/MarkdownContent.astro";
 import { CodeBlock, MultiCode } from "@components/Code";
 import Markdown from "@components/Markdown.astro";
 import type { ApiTopSection } from "@lib/openapi/routes";
 import { doc, resolveSchema } from "@lib/openapi";
 import type { OpenAPIV3_1 } from "openapi-types";
 import { ArrowSlanted } from "@sumup-oss/icons";
-import { Anchor, Body, Button, Card } from "@sumup-oss/circuit-ui";
+import { Anchor, Body, Card } from "@sumup-oss/circuit-ui";
 import { getJavaSdkVersion } from "@lib/sdks/javaSdkVersion";
 import Table from "@components/content/Table";
 import Example from "./Example.astro";
@@ -44,18 +45,16 @@ const sectionAttrs = (id: ApiTopSection) =>
           target="_blank"
           rel="noreferrer noopener"
           icon={ArrowSlanted}
-        >
-          View YAML spec
-        </Button>
+          label="View YAML spec"
+        />
         <Button
           size="s"
           href="https://raw.githubusercontent.com/sumup/sumup-openapi/refs/heads/main/openapi.json"
           target="_blank"
           rel="noreferrer noopener"
           icon={ArrowSlanted}
-        >
-          View JSON spec
-        </Button>
+          label="View JSON spec"
+        />
       </div>
     </div>
     {

diff --git a/src/components/Button.tsx b/src/components/Button.tsx
@@ -0,0 +1,17 @@
+import {
+  Button as CircuitButton,
+  I18nProvider,
+  type ButtonProps,
+} from "@sumup-oss/circuit-ui";
+
+// Astro renders each React component as a separate root, so buttons used in
+// Astro templates need their own Circuit UI internationalization context.
+type Props = Omit<ButtonProps, "children"> & { label: string };
+
+export default function Button({ label, ...props }: Props) {
+  return (
+    <I18nProvider locale="en-US">
+      <CircuitButton {...props}>{label}</CircuitButton>
+    </I18nProvider>
+  );
+}
diff --git a/src/components/ContactForm.tsx b/src/components/ContactForm.tsx
@@ -2,6 +2,7 @@ import {
   Anchor,
   Body,
   ButtonGroup,
+  I18nProvider,
   ToastProvider,
   useNotificationToast,
   type SelectOption,
@@ -273,9 +274,11 @@ const Contact: FC<ContactParams> = ({ status }) => {
 
 export default function ContactForm(params: ContactParams) {
   return (
-    <ToastProvider>
-      <Contact {...params} />
-    </ToastProvider>
+    <I18nProvider locale="en-US">
+      <ToastProvider>
+        <Contact {...params} />
+      </ToastProvider>
+    </I18nProvider>
   );
 }
 

diff --git a/src/components/RssIcon.tsx b/src/components/RssIcon.tsx
@@ -0,0 +1,18 @@
+import type { IconProps } from "@sumup-oss/icons";
+
+export default function RssIcon({ size = "16", ...props }: IconProps) {
+  return (
+    <svg
+      {...props}
+      fill="currentColor"
+      height={size}
+      width={size}
+      viewBox="-271 273 256 256"
+      aria-hidden="true"
+    >
+      <path d="M-271,360v48.9c31.9,0,62.1,12.6,84.7,35.2c22.6,22.6,35.1,52.8,35.1,84.8v0.1h49.1c0-46.6-19-88.7-49.6-119.4C-182.2,379-224.4,360.1-271,360z" />
+      <path d="M-237,460.9c-9.4,0-17.8,3.8-24,10s-10,14.6-10,24c0,9.3,3.8,17.7,10,23.9c6.2,6.1,14.6,9.9,24,9.9s17.8-3.7,24-9.9s10-14.6,10-23.9c0-9.4-3.8-17.8-10-24C-219.2,464.7-227.6,460.9-237,460.9z" />
+      <path d="M-90.1,348.1c-46.3-46.4-110.2-75.1-180.8-75.1v48.9C-156.8,322-64.1,414.9-64,529h49C-15,458.4-43.7,394.5-90.1,348.1z" />
+    </svg>
+  );
+}
diff --git a/src/components/content/SearchableTable.tsx b/src/components/content/SearchableTable.tsx
@@ -1,4 +1,4 @@
-import { SearchInput } from "@sumup-oss/circuit-ui";
+import { I18nProvider, SearchInput } from "@sumup-oss/circuit-ui";
 import { useMemo, useRef, useState } from "react";
 
 import styles from "./SearchableTable.module.css";
@@ -44,23 +44,25 @@ const SearchableTable = ({
   }, [columns, normalizedQuery, rows]);
 
   return (
-    <section className={`${styles.section} not-content`}>
-      <SearchInput
-        label="Search"
-        value={searchQuery}
-        onChange={(event) => setSearchQuery(event.target.value)}
-        placeholder={searchPlaceholder}
-        hideLabel
-      />
+    <I18nProvider locale="en-US">
+      <section className={`${styles.section} not-content`}>
+        <SearchInput
+          label="Search"
+          value={searchQuery}
+          onChange={(event) => setSearchQuery(event.target.value)}
+          placeholder={searchPlaceholder}
+          hideLabel
+        />
 
-      <Table
-        columns={columns}
-        rows={filteredRows}
-        tableLayout={tableLayout}
-        containerRef={wrapperRef}
-        maxHeight="420px"
-      />
-    </section>
+        <Table
+          columns={columns}
+          rows={filteredRows}
+          tableLayout={tableLayout}
+          containerRef={wrapperRef}
+          maxHeight="420px"
+        />
+      </section>
+    </I18nProvider>
   );
 };
 

diff --git a/src/overrides/PageTitle.astro b/src/overrides/PageTitle.astro
@@ -1,5 +1,6 @@
 ---
-import { Display, Body, Button } from "@sumup-oss/circuit-ui";
+import Button from "@components/Button";
+import { Display, Body } from "@sumup-oss/circuit-ui";
 import { ArrowSlanted } from "@sumup-oss/icons";
 
 const {
@@ -40,9 +41,8 @@ const linkItems = Array.isArray(links) ? links : [];
               rel={isExternal ? "noreferrer noopener" : undefined}
               icon={isExternal ? ArrowSlanted : undefined}
               className="page-link"
-            >
-              <span>{link.title}</span>
-            </Button>
+              label={link.title}
+            />
           );
         })}
       </div>

diff --git a/src/pages/changelog/index.astro b/src/pages/changelog/index.astro
@@ -1,7 +1,9 @@
 ---
+import Button from "@components/Button";
+import RssIcon from "@components/RssIcon";
 import { getCollection, render } from "astro:content";
 import slugify from "@sindresorhus/slugify";
-import { Status, Body, Button, Anchor, Headline } from "@sumup-oss/circuit-ui";
+import { Status, Body, Anchor, Headline } from "@sumup-oss/circuit-ui";
 import StarlightPage from "@astrojs/starlight/components/StarlightPage.astro";
 import MarkdownContent from "@components/MarkdownContent.astro";
 import type { StarlightPageProps } from "@astrojs/starlight/props";
@@ -57,35 +59,12 @@ const props = {
     </ul>
   </div>
   <div class="rssSubscribe">
-    <Button size="s" href="/changelog/rss.xml">
-      <span class="rssButtonContent">
-        <svg
-          fill="currentColor"
-          height="14px"
-          width="14px"
-          version="1.1"
-          xmlns="http://www.w3.org/2000/svg"
-          xmlns:xlink="http://www.w3.org/1999/xlink"
-          viewBox="-271 273 256 256"
-          xml:space="preserve"
-        >
-          <g>
-            <path
-              d="M-271,360v48.9c31.9,0,62.1,12.6,84.7,35.2c22.6,22.6,35.1,52.8,35.1,84.8v0.1h49.1c0-46.6-19-88.7-49.6-119.4
-        		C-182.2,379-224.4,360.1-271,360z"
-            ></path>
-            <path
-              d="M-237,460.9c-9.4,0-17.8,3.8-24,10s-10,14.6-10,24c0,9.3,3.8,17.7,10,23.9c6.2,6.1,14.6,9.9,24,9.9s17.8-3.7,24-9.9
-        		s10-14.6,10-23.9c0-9.4-3.8-17.8-10-24C-219.2,464.7-227.6,460.9-237,460.9z"
-            ></path>
-            <path
-              d="M-90.1,348.1c-46.3-46.4-110.2-75.1-180.8-75.1v48.9C-156.8,322-64.1,414.9-64,529h49C-15,458.4-43.7,394.5-90.1,348.1z"
-            ></path>
-          </g>
-        </svg>
-        Subscribe to RSS
-      </span>
-    </Button>
+    <Button
+      size="s"
+      href="/changelog/rss.xml"
+      icon={RssIcon}
+      label="Subscribe to RSS"
+    />
   </div>
   <main class="content">
     {
@@ -204,14 +183,4 @@ const props = {
     display: flex;
     justify-content: center;
   }
-
-  .rssButtonContent {
-    display: inline-flex;
-    align-items: center;
-    gap: var(--cui-spacings-byte);
-  }
-
-  .rssIcon {
-    flex-shrink: 0;
-  }
 </style>
diff --git a/src/pages/changelog/tags/[tag].astro b/src/pages/changelog/tags/[tag].astro
@@ -1,7 +1,9 @@
 ---
+import Button from "@components/Button";
+import RssIcon from "@components/RssIcon";
 import { getCollection, render } from "astro:content";
 import slugify from "@sindresorhus/slugify";
-import { Status, Body, Button, Anchor, Headline } from "@sumup-oss/circuit-ui";
+import { Status, Body, Anchor, Headline } from "@sumup-oss/circuit-ui";
 import StarlightPage from "@astrojs/starlight/components/StarlightPage.astro";
 import MarkdownContent from "@components/MarkdownContent.astro";
 import type { StarlightPageProps } from "@astrojs/starlight/props";
@@ -79,35 +81,12 @@ const props = {
     </ul>
   </div>
   <div class="rssSubscribe">
-    <Button size="s" href="/changelog/rss.xml">
-      <span class="rssButtonContent">
-        <svg
-          fill="currentColor"
-          height="14px"
-          width="14px"
-          version="1.1"
-          xmlns="http://www.w3.org/2000/svg"
-          xmlns:xlink="http://www.w3.org/1999/xlink"
-          viewBox="-271 273 256 256"
-          xml:space="preserve"
-        >
-          <g>
-            <path
-              d="M-271,360v48.9c31.9,0,62.1,12.6,84.7,35.2c22.6,22.6,35.1,52.8,35.1,84.8v0.1h49.1c0-46.6-19-88.7-49.6-119.4
-            C-182.2,379-224.4,360.1-271,360z"
-            ></path>
-            <path
-              d="M-237,460.9c-9.4,0-17.8,3.8-24,10s-10,14.6-10,24c0,9.3,3.8,17.7,10,23.9c6.2,6.1,14.6,9.9,24,9.9s17.8-3.7,24-9.9
-            s10-14.6,10-23.9c0-9.4-3.8-17.8-10-24C-219.2,464.7-227.6,460.9-237,460.9z"
-            ></path>
-            <path
-              d="M-90.1,348.1c-46.3-46.4-110.2-75.1-180.8-75.1v48.9C-156.8,322-64.1,414.9-64,529h49C-15,458.4-43.7,394.5-90.1,348.1z"
-            ></path>
-          </g>
-        </svg>
-        Subscribe to RSS
-      </span>
-    </Button>
+    <Button
+      size="s"
+      href="/changelog/rss.xml"
+      icon={RssIcon}
+      label="Subscribe to RSS"
+    />
   </div>
   <main class="content">
     {