diff --git a/src/components/ButtonLink/ButtonLink.stories.tsx b/src/components/ButtonLink/ButtonLink.stories.tsx
deleted file mode 100644
index bcf16f56..00000000
--- a/src/components/ButtonLink/ButtonLink.stories.tsx
+++ /dev/null
@@ -1,117 +0,0 @@
-import React from 'react';
-import { css } from 'emotion';
-
-import { space } from '@guardian/src-foundations';
-import { SvgCheckmark } from '@guardian/src-icons';
-
-import { Pillar } from '@guardian/types';
-
-import { Row } from '../Row/Row';
-
-import { ButtonLink } from './ButtonLink';
-
-const Space = ({ amount }: { amount: 1 | 2 | 3 | 4 | 5 | 6 | 9 | 12 | 24 }) => (
-	<div
-		className={css`
-			width: ${space[amount]}px;
-		`}
-	/>
-);
-
-export default { component: ButtonLink, title: 'ButtonLink' };
-
-export const Single = () => (
-	<ButtonLink
-		onClick={() => {
-			alert('Clicked!');
-		}}
-		pillar={Pillar.Lifestyle}
-		linkName=""
-	>
-		I'm a button but I look like a link. Click me
-	</ButtonLink>
-);
-Single.story = { name: 'a single button' };
-
-export const Small = () => (
-	<ButtonLink
-		onClick={() => {
-			alert('Clicked!');
-		}}
-		size="small"
-		pillar={Pillar.Lifestyle}
-		linkName=""
-	>
-		I'm small
-	</ButtonLink>
-);
-Small.story = { name: 'a small button' };
-
-export const Group = () => (
-	<Row>
-		<ButtonLink onClick={() => {}} pillar={Pillar.Culture} linkName="">
-			Culture one
-		</ButtonLink>
-		<Space amount={3} />
-		<ButtonLink onClick={() => {}} pillar={Pillar.News} linkName="">
-			News two
-		</ButtonLink>
-		<Space amount={3} />
-		<ButtonLink onClick={() => {}} pillar={Pillar.Sport} linkName="">
-			Sport three
-		</ButtonLink>
-	</Row>
-);
-Group.story = { name: 'a group of buttons' };
-
-export const IconLeft = () => (
-	<ButtonLink
-		onClick={() => {}}
-		pillar={Pillar.News}
-		icon={<SvgCheckmark />}
-		iconSide="left"
-		linkName=""
-	>
-		Check to the left
-	</ButtonLink>
-);
-IconLeft.story = { name: 'with an icon to the left' };
-
-export const IconRight = () => (
-	<ButtonLink
-		onClick={() => {}}
-		pillar={Pillar.News}
-		icon={<SvgCheckmark />}
-		iconSide="right"
-		linkName=""
-	>
-		Check to the right
-	</ButtonLink>
-);
-IconRight.story = { name: 'with an icon to the right' };
-
-export const Grey = () => (
-	<ButtonLink
-		onClick={() => {
-			alert('Clicked!');
-		}}
-		linkName=""
-	>
-		This is how I look when no pillar is passed
-	</ButtonLink>
-);
-Grey.story = { name: 'a button with no pillar' };
-
-export const Background = () => (
-	<div
-		className={css`
-			background-color: lightgrey;
-			padding: 20px;
-		`}
-	>
-		<ButtonLink onClick={() => {}} pillar={Pillar.Lifestyle} linkName="">
-			How do I look on a grey background?
-		</ButtonLink>
-	</div>
-);
-Background.story = { name: 'on a grey background' };
diff --git a/src/components/ButtonLink/ButtonLink.tsx b/src/components/ButtonLink/ButtonLink.tsx
deleted file mode 100644
index 2fb65a72..00000000
--- a/src/components/ButtonLink/ButtonLink.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-import React from 'react';
-import { css, cx } from 'emotion';
-
-import { palette, neutral } from '@guardian/src-foundations';
-import { textSans } from '@guardian/src-foundations/typography';
-import { Button } from '@guardian/src-button';
-
-import { Theme } from '@guardian/types';
-
-import { pillarToString } from '../../lib/pillarToString';
-
-type Props = {
-	onClick: () => void;
-	pillar?: Theme;
-	size?: 'xsmall' | 'small' | 'default';
-	icon?: JSX.Element;
-	iconSide?: 'left' | 'right';
-	children: string | JSX.Element;
-	linkName: string;
-};
-
-const buttonOverrides = (pillar?: Theme) => {
-	const pillarString = pillar || pillar === 0 ? pillarToString(pillar) : null;
-	return css`
-		button {
-			${textSans.xxsmall({
-				fontWeight: pillarString ? 'bold' : 'regular',
-			})}
-			color: ${pillarString ? palette[pillarString][400] : neutral[46]};
-			background-color: transparent;
-			height: 18px;
-			min-height: 18px;
-			/* Radius 0 is used to style focus halo */
-			border-radius: 0;
-
-			:hover {
-				text-decoration: underline;
-				text-decoration-color: ${pillarString
-					? palette[pillarString][400]
-					: neutral[46]};
-			}
-		}
-	`;
-};
-
-export const ButtonLink = ({
-	pillar,
-	onClick,
-	size = 'default',
-	icon,
-	iconSide,
-	children,
-	linkName,
-}: Props) => (
-	<div className={cx(buttonOverrides(pillar))}>
-		<Button
-			priority="subdued"
-			size={size}
-			onClick={onClick}
-			icon={icon}
-			iconSide={iconSide}
-			data-link-name={linkName}
-		>
-			{children}
-		</Button>
-	</div>
-);
diff --git a/src/components/Comment/Comment.tsx b/src/components/Comment/Comment.tsx
index fd505b65..d87018b8 100644
--- a/src/components/Comment/Comment.tsx
+++ b/src/components/Comment/Comment.tsx
@@ -7,6 +7,7 @@ import { neutral, border } from '@guardian/src-foundations/palette';
 import { textSans } from '@guardian/src-foundations/typography';
 import { Link } from '@guardian/src-link';
 import { SvgIndent } from '@guardian/src-icons';
+import { Button } from '@guardian/src-button';
 
 import { Theme } from '@guardian/types';
 
@@ -17,7 +18,6 @@ import { Timestamp } from '../Timestamp/Timestamp';
 import { Avatar } from '../Avatar/Avatar';
 import { Row } from '../Row/Row';
 import { Column } from '../Column/Column';
-import { ButtonLink } from '../ButtonLink/ButtonLink';
 
 import { CommentType, UserProfile } from '../../types';
 import { pickComment, unPickComment } from '../../lib/api';
@@ -224,6 +224,38 @@ const cssReplyToWrapper = css`
 	}
 `;
 
+const buttonLinkPillarBaseStyles = (pillar: Theme) => css`
+	button {
+		color: ${palette[pillarToString(pillar)][400]};
+		background-color: transparent;
+		height: 18px;
+		min-height: 18px;
+		/* Radius 0 is used to style focus halo */
+		border-radius: 0;
+
+		:hover {
+			text-decoration: underline;
+			text-decoration-color: ${palette[pillarToString(pillar)][400]};
+		}
+	}
+`;
+
+const buttonLinkBaseStyles = css`
+	button {
+		color: ${neutral[46]};
+		background-color: transparent;
+		height: 18px;
+		min-height: 18px;
+		/* Radius 0 is used to style focus halo */
+		border-radius: 0;
+
+		:hover {
+			text-decoration: underline;
+			text-decoration-color: ${neutral[46]};
+		}
+	}
+`;
+
 // In order to show as much of the usernames as possible without fixed widths:
 // - First label should shrink to contents but be no bigger than 60%
 // - Second label should never force first label less than its contents if less than 60%
@@ -493,13 +525,25 @@ export const Comment = ({
 							<Row>
 								<>All posts from this user have been muted on this device.</>
 								<Space amount={1} />
-								<ButtonLink
-									onClick={() => toggleMuteStatus(comment.userProfile.userId)}
-									linkName="unmute-user"
-									size="xsmall"
+								<div
+									className={cx(
+										buttonLinkBaseStyles,
+										css`
+											button {
+												${textSans.xsmall({ fontWeight: 'bold' })}
+											}
+										`,
+									)}
 								>
-									Unmute?
-								</ButtonLink>
+									<Button
+										priority="subdued"
+										size="small"
+										onClick={() => toggleMuteStatus(comment.userProfile.userId)}
+										data-link-name="unmute-user"
+									>
+										Unmute?
+									</Button>
+								</div>
 							</Row>
 						</p>
 					)}
@@ -528,16 +572,26 @@ export const Comment = ({
 										<>
 											{/* If user is not logged in we link to the login page */}
 											{user ? (
-												<div className={svgReplyArrow}>
-													<ButtonLink
-														pillar={pillar}
+												<div
+													className={cx(
+														svgReplyArrow,
+														buttonLinkPillarBaseStyles(pillar),
+														css`
+															button {
+																${textSans.small({ fontWeight: 'bold' })}
+															}
+														`,
+													)}
+												>
+													<Button
+														priority="subdued"
 														onClick={() => setCommentBeingRepliedTo(comment)}
 														icon={<SvgIndent />}
 														iconSide="left"
-														linkName="reply to comment"
+														data-link-name="reply to comment"
 													>
 														Reply
-													</ButtonLink>
+													</Button>
 												</div>
 											) : (
 												<div
@@ -570,40 +624,75 @@ export const Comment = ({
 									{user &&
 										user.badge.some((e) => e.name === 'Staff') &&
 										user.userId !== comment.userProfile.userId && (
-											<ButtonLink
-												pillar={pillar}
-												onClick={isHighlighted ? unPick : pick}
-												linkName={
-													isHighlighted ? 'unpick-comment' : 'pick-comment'
-												}
+											<div
+												className={cx(
+													buttonLinkPillarBaseStyles(pillar),
+													css`
+														button {
+															${textSans.small({ fontWeight: 'bold' })}
+														}
+													`,
+												)}
 											>
-												{isHighlighted ? 'Unpick' : 'Pick'}
-											</ButtonLink>
+												<Button
+													priority="subdued"
+													onClick={isHighlighted ? unPick : pick}
+													data-link-name={
+														isHighlighted ? 'unpick-comment' : 'pick-comment'
+													}
+												>
+													{isHighlighted ? 'Unpick' : 'Pick'}
+												</Button>
+											</div>
 										)}
 								</Row>
 								<Row>
 									{/* You can't mute unless logged in and you can't yourself */}
 									{user && comment.userProfile.userId !== user.userId ? (
-										<ButtonLink
-											onClick={() =>
-												toggleMuteStatus(comment.userProfile.userId)
-											}
-											size="xsmall"
-											linkName="mute-user"
+										<div
+											className={cx(
+												buttonLinkBaseStyles,
+												css`
+													button {
+														${textSans.xsmall()}
+													}
+												`,
+											)}
 										>
-											Mute
-										</ButtonLink>
+											<Button
+												priority="subdued"
+												size="small"
+												onClick={() =>
+													toggleMuteStatus(comment.userProfile.userId)
+												}
+												data-link-name="mute-user"
+											>
+												Mute
+											</Button>
+										</div>
 									) : (
 										<></>
 									)}
 									<Space amount={4} />
-									<ButtonLink
-										size="xsmall"
-										onClick={toggleSetShowForm}
-										linkName="Open report abuse"
+									<div
+										className={cx(
+											buttonLinkBaseStyles,
+											css`
+												button {
+													${textSans.xsmall()}
+												}
+											`,
+										)}
 									>
-										Report
-									</ButtonLink>
+										<Button
+											priority="subdued"
+											size="small"
+											onClick={toggleSetShowForm}
+											data-link-name="Open report abuse"
+										>
+											Report
+										</Button>
+									</div>
 									{showAbuseReportForm && (
 										<div
 											className={css`
diff --git a/src/components/CommentReplyPreview/CommentReplyPreview.tsx b/src/components/CommentReplyPreview/CommentReplyPreview.tsx
index 15705526..eff27919 100644
--- a/src/components/CommentReplyPreview/CommentReplyPreview.tsx
+++ b/src/components/CommentReplyPreview/CommentReplyPreview.tsx
@@ -1,13 +1,14 @@
 import React, { useState } from 'react';
-import { css } from 'emotion';
+import { css, cx } from 'emotion';
 
 import { textSans } from '@guardian/src-foundations/typography';
-import { neutral, space, text } from '@guardian/src-foundations';
+import { neutral, space, text, palette } from '@guardian/src-foundations';
 import { SvgIndent } from '@guardian/src-icons';
 import { Theme } from '@guardian/types';
+import { Button } from '@guardian/src-button';
 
-import { ButtonLink } from '../ButtonLink/ButtonLink';
 import { Row } from '../Row/Row';
+import { pillarToString } from '../../lib/pillarToString';
 
 import { CommentType } from '../../types';
 
@@ -77,6 +78,38 @@ const blueLink = css`
 	color: ${text.anchorPrimary};
 `;
 
+const buttonLinkPillarBaseStyles = (pillar: Theme) => css`
+	button {
+		color: ${palette[pillarToString(pillar)][400]};
+		background-color: transparent;
+		height: 18px;
+		min-height: 18px;
+		/* Radius 0 is used to style focus halo */
+		border-radius: 0;
+
+		:hover {
+			text-decoration: underline;
+			text-decoration-color: ${palette[pillarToString(pillar)][400]};
+		}
+	}
+`;
+
+const buttonLinkBaseStyles = css`
+	button {
+		color: ${neutral[46]};
+		background-color: transparent;
+		height: 18px;
+		min-height: 18px;
+		/* Radius 0 is used to style focus halo */
+		border-radius: 0;
+
+		:hover {
+			text-decoration: underline;
+			text-decoration-color: ${neutral[46]};
+		}
+	}
+`;
+
 export const CommentReplyPreview = ({
 	pillar,
 	commentBeingRepliedTo,
@@ -95,15 +128,26 @@ export const CommentReplyPreview = ({
 					{commentBeingRepliedTo.userProfile.displayName}
 				</div>
 				<Space amount={3} />
-				<ButtonLink
-					pillar={pillar}
-					onClick={() => setDisplayReplyComment(!displayReplyComment)}
-					linkName={
-						displayReplyComment ? 'reply-comment-hide' : 'reply-comment-show'
-					}
+				<div
+					className={cx(
+						buttonLinkPillarBaseStyles(pillar),
+						css`
+							button {
+								${textSans.small({ fontWeight: 'bold' })}
+							}
+						`,
+					)}
 				>
-					{displayReplyComment ? 'Hide Comment' : 'Show comment'}
-				</ButtonLink>
+					<Button
+						priority="subdued"
+						onClick={() => setDisplayReplyComment(!displayReplyComment)}
+						data-link-name={
+							displayReplyComment ? 'reply-comment-hide' : 'reply-comment-show'
+						}
+					>
+						{displayReplyComment ? 'Hide Comment' : 'Show comment'}
+					</Button>
+				</div>
 			</Row>
 			{displayReplyComment && (
 				<Preview
@@ -138,12 +182,24 @@ export const Preview = ({
 				}}
 			/>
 
-			<ButtonLink
-				onClick={() => setDisplayReplyComment(!displayReplyComment)}
-				linkName="hide-comment"
+			<div
+				className={cx(
+					buttonLinkBaseStyles,
+					css`
+						button {
+							${textSans.small()}
+						}
+					`,
+				)}
 			>
-				<span className={blueLink}>Hide Comment</span>
-			</ButtonLink>
+				<Button
+					priority="subdued"
+					onClick={() => setDisplayReplyComment(!displayReplyComment)}
+					data-link-name="hide-comment"
+				>
+					<span className={blueLink}>Hide Comment</span>
+				</Button>
+			</div>
 		</div>
 	);
 };