From 0f8f4e33e36b1d31055540588129f96ddad31281 Mon Sep 17 00:00:00 2001
From: Jamie B <53781962+JamieB-gu@users.noreply.github.com>
Date: Mon, 10 Aug 2026 15:47:47 +0100
Subject: [PATCH] Election trackers `OnwardLink`

An `OnwardLink` component for linking to a full results page from an
election tracker.
---
 .../ElectionTrackers/OnwardLink.stories.tsx   | 22 +++++++++++++
 .../ElectionTrackers/OnwardLink.tsx           | 33 +++++++++++++++++++
 dotcom-rendering/src/paletteDeclarations.ts   |  8 +++++
 3 files changed, 63 insertions(+)
 create mode 100644 dotcom-rendering/src/components/ElectionTrackers/OnwardLink.stories.tsx
 create mode 100644 dotcom-rendering/src/components/ElectionTrackers/OnwardLink.tsx

diff --git a/dotcom-rendering/src/components/ElectionTrackers/OnwardLink.stories.tsx b/dotcom-rendering/src/components/ElectionTrackers/OnwardLink.stories.tsx
new file mode 100644
index 00000000000..bfb22f15896
--- /dev/null
+++ b/dotcom-rendering/src/components/ElectionTrackers/OnwardLink.stories.tsx
@@ -0,0 +1,22 @@
+import { allModes } from '../../../.storybook/modes';
+import preview from '../../../.storybook/preview';
+import { OnwardLink as OnwardLinkComponent } from './OnwardLink';
+
+const meta = preview.meta({
+	title: 'Components/Election Trackers/Onward Link',
+	component: OnwardLinkComponent,
+	parameters: {
+		chromatic: {
+			modes: {
+				'vertical mobileMedium': allModes['vertical mobileMedium'],
+			},
+		},
+	},
+});
+
+export const OnwardLink = meta.story({
+	args: {
+		link: new URL('https://www.theguardian.com'),
+		text: 'Full results',
+	},
+});
diff --git a/dotcom-rendering/src/components/ElectionTrackers/OnwardLink.tsx b/dotcom-rendering/src/components/ElectionTrackers/OnwardLink.tsx
new file mode 100644
index 00000000000..64a46ca848e
--- /dev/null
+++ b/dotcom-rendering/src/components/ElectionTrackers/OnwardLink.tsx
@@ -0,0 +1,33 @@
+import { css } from '@emotion/react';
+import { space } from '@guardian/source/foundations';
+import {
+	LinkButton,
+	SvgArrowRightStraight,
+} from '@guardian/source/react-components';
+import { palette } from '../../palette';
+
+type Props = {
+	link: URL;
+	text: string;
+};
+
+/**
+ * An instance of a Source `LinkButton` for linking to a full results page from
+ * an election tracker.
+ */
+export const OnwardLink = (props: Props) => (
+	<LinkButton
+		icon={<SvgArrowRightStraight />}
+		iconSide="right"
+		theme={{
+			backgroundPrimary: palette('--election-tracker-button-background'),
+			textPrimary: palette('--election-tracker-button-text'),
+		}}
+		cssOverrides={css({
+			marginTop: space[4],
+		})}
+		href={props.link.href}
+	>
+		{props.text}
+	</LinkButton>
+);
diff --git a/dotcom-rendering/src/paletteDeclarations.ts b/dotcom-rendering/src/paletteDeclarations.ts
index 0a9044d2cf8..b2501285c81 100644
--- a/dotcom-rendering/src/paletteDeclarations.ts
+++ b/dotcom-rendering/src/paletteDeclarations.ts
@@ -7157,6 +7157,14 @@ const paletteColours = {
 		light: () => sourcePalette.neutral[86],
 		dark: () => sourcePalette.neutral[20],
 	},
+	'--election-tracker-button-background': {
+		light: () => sourcePalette.neutral[7],
+		dark: () => sourcePalette.neutral[100],
+	},
+	'--election-tracker-button-text': {
+		light: () => sourcePalette.neutral[100],
+		dark: () => sourcePalette.neutral[7],
+	},
 	'--email-signup-button-background': {
 		light: emailSignupButtonBackgroundLight,
 		dark: emailSignupButtonBackgroundDark,