diff --git a/examples/with-vite/src/main.tsx b/examples/with-vite/src/main.tsx
index 2cd62bcc..9ad9566d 100644
--- a/examples/with-vite/src/main.tsx
+++ b/examples/with-vite/src/main.tsx
@@ -92,14 +92,14 @@ module.exports = {
 				<Button>Button</Button>
 			</div>
 			<div className="mb-2 flex flex-wrap gap-2">
-				<Anchor link="https://www.google.com">Anchor as a button</Anchor>
-				<Anchor link="https://www.google.com">
+				<Anchor href="https://www.google.com">Anchor as a button</Anchor>
+				<Anchor href="https://www.google.com">
 					Anchor as a button lorem ipsum
 				</Anchor>
-				<Anchor link="https://www.google.com">
+				<Anchor href="https://www.google.com">
 					Anchor as a button lorem ipsum dolor
 				</Anchor>
-				<Anchor link="https://www.google.com">
+				<Anchor href="https://www.google.com">
 					Anchor as a button lorem ipsum dolor sit amet
 				</Anchor>
 			</div>
diff --git a/examples/with-webpack/src/main.tsx b/examples/with-webpack/src/main.tsx
index 864be663..9acfdc3d 100644
--- a/examples/with-webpack/src/main.tsx
+++ b/examples/with-webpack/src/main.tsx
@@ -92,14 +92,14 @@ module.exports = {
 				<Button>Button</Button>
 			</div>
 			<div className="mb-2 flex flex-wrap gap-2">
-				<Anchor link="https://www.google.com">Anchor as a button</Anchor>
-				<Anchor link="https://www.google.com">
+				<Anchor href="https://www.google.com">Anchor as a button</Anchor>
+				<Anchor href="https://www.google.com">
 					Anchor as a button lorem ipsum
 				</Anchor>
-				<Anchor link="https://www.google.com">
+				<Anchor href="https://www.google.com">
 					Anchor as a button lorem ipsum dolor
 				</Anchor>
-				<Anchor link="https://www.google.com">
+				<Anchor href="https://www.google.com">
 					Anchor as a button lorem ipsum dolor sit amet
 				</Anchor>
 			</div>
diff --git a/packages/documentation/src/Components/Anchor.stories.tsx b/packages/documentation/src/Components/Anchor.stories.tsx
index e41f5b88..e85f8739 100644
--- a/packages/documentation/src/Components/Anchor.stories.tsx
+++ b/packages/documentation/src/Components/Anchor.stories.tsx
@@ -6,10 +6,35 @@ export default {
 	meta: {
 		importName: "Anchor",
 	},
+	args: {
+		fullWidth: false,
+		mode: "system",
+		focusMode: "system",
+		raw: false,
+		href: "https://example.com",
+		noBorder: false,
+		size: "small",
+		noTruncate: false,
+		noNewWindowIcon: false,
+	},
+	argTypes: {
+		mode: {
+			options: ["dark", "light", "system", "alt-system"],
+			control: { type: "radio" },
+		},
+		focusMode: {
+			options: ["dark", "light", "system", "alt-system"],
+			control: { type: "radio" },
+		},
+		size: {
+			options: ["small", "medium", "large"],
+			control: { type: "radio" },
+		},
+	},
 };
 
 export const Basic: Story<any> = (args) => (
-	<div className="flex flex-wrap">
+	<div className="flex flex-wrap gap-2">
 		<Anchor {...args}>Anchor as a button</Anchor>
 		<Anchor {...args}>Anchor as a button lorem ipsum</Anchor>
 		<Anchor {...args}>Anchor as a button lorem ipsum dolor</Anchor>
@@ -17,29 +42,27 @@ export const Basic: Story<any> = (args) => (
 	</div>
 );
 
-Basic.args = {
-	fullWidth: false,
-	mode: "system",
-	focusMode: "system",
-	raw: false,
-	link: "https://www.google.com",
-	noBorder: false,
-	size: "small",
-	noTruncate: false,
-	spacing: { r: 2, b: 2 },
+export const NewWindow: Story<any> = (args) => (
+	<div className="flex flex-wrap gap-2">
+		<Anchor {...args}>Anchor as a button</Anchor>
+		<Anchor {...args}>Anchor as a button lorem ipsum</Anchor>
+		<Anchor {...args}>Anchor as a button lorem ipsum dolor</Anchor>
+		<Anchor {...args}>Anchor as a button lorem ipsum dolor sit amet</Anchor>
+	</div>
+);
+NewWindow.args = {
+	target: "_blank",
 };
 
-Basic.argTypes = {
-	mode: {
-		options: ["dark", "light", "system", "alt-system"],
-		control: { type: "radio" },
-	},
-	focusMode: {
-		options: ["dark", "light", "system", "alt-system"],
-		control: { type: "radio" },
-	},
-	size: {
-		options: ["small", "medium", "large"],
-		control: { type: "radio" },
-	},
+export const Truncate: Story<any> = (args) => (
+	<div className="flex flex-wrap gap-2">
+		<Anchor {...args}>Anchor as a button</Anchor>
+		<Anchor {...args}>Anchor as a button lorem ipsum</Anchor>
+		<Anchor {...args}>Anchor as a button lorem ipsum dolor</Anchor>
+		<Anchor {...args}>Anchor as a button lorem ipsum dolor sit amet</Anchor>
+	</div>
+);
+
+Truncate.args = {
+	className: "w-44 sm:w-52",
 };
diff --git a/packages/documentation/src/Components/Button.stories.tsx b/packages/documentation/src/Components/Button.stories.tsx
index 2b1c5b37..062f1b52 100644
--- a/packages/documentation/src/Components/Button.stories.tsx
+++ b/packages/documentation/src/Components/Button.stories.tsx
@@ -6,15 +6,44 @@ export default {
 	meta: {
 		importName: "Button",
 	},
+	args: {
+		disabled: false,
+		fullWidth: false,
+		mode: "system",
+		focusMode: "system",
+		size: "medium",
+		raw: false,
+		noBorder: false,
+		variant: "primary",
+		noTruncate: false,
+	},
+	argTypes: {
+		mode: {
+			options: ["dark", "light", "system", "alt-system"],
+			control: { type: "radio" },
+		},
+		focusMode: {
+			options: ["dark", "light", "system", "alt-system"],
+			control: { type: "radio" },
+		},
+		size: {
+			options: ["small", "medium", "large"],
+			control: { type: "radio" },
+		},
+		variant: {
+			options: ["primary", "secondary", "danger"],
+			control: { type: "radio" },
+		},
+	},
 };
 
 export const Basic: Story<any> = (args) => {
 	return (
 		<>
 			<div className="flex flex-wrap gap-2">
-				<Button {...args}>Button</Button>
-				<Button {...args}>Button</Button>
-				<Button {...args}>Button</Button>
+				<Button {...args}>Button lorem ipsum</Button>
+				<Button {...args}>Button lorem ipsum dolor</Button>
+				<Button {...args}>Button lorem ipsum dolor sit amet</Button>
 			</div>
 
 			<p>
@@ -35,31 +64,33 @@ export const Basic: Story<any> = (args) => {
 	);
 };
 
-Basic.args = {
-	disabled: false,
-	fullWidth: false,
-	mode: "system",
-	focusMode: "system",
-	size: "medium",
-	raw: false,
-	noBorder: false,
-	variant: "primary",
+export const Truncate: Story<any> = (args) => {
+	return (
+		<>
+			<div className="flex flex-wrap gap-2">
+				<Button {...args}>Button lorem ipsum</Button>
+				<Button {...args}>Button lorem ipsum dolor</Button>
+				<Button {...args}>Button lorem ipsum dolor sit amet</Button>
+			</div>
+
+			<p>
+				The following row is having the <code>variant</code> prop hard-coded:
+			</p>
+			<div className="flex flex-wrap gap-2">
+				<Button {...args} variant="primary">
+					Button lorem ipsum
+				</Button>
+				<Button {...args} variant="secondary">
+					Button lorem ipsum dolor
+				</Button>
+				<Button {...args} variant="danger">
+					Button lorem ipsum dolor sit amet
+				</Button>
+			</div>
+		</>
+	);
 };
-Basic.argTypes = {
-	mode: {
-		options: ["dark", "light", "system", "alt-system"],
-		control: { type: "radio" },
-	},
-	focusMode: {
-		options: ["dark", "light", "system", "alt-system"],
-		control: { type: "radio" },
-	},
-	size: {
-		options: ["small", "medium", "large"],
-		control: { type: "radio" },
-	},
-	variant: {
-		options: ["primary", "secondary", "danger"],
-		control: { type: "radio" },
-	},
+
+Truncate.args = {
+	className: "w-44 sm:w-52",
 };
diff --git a/packages/documentation/src/Components/Header.stories.tsx b/packages/documentation/src/Components/Header.stories.tsx
index e614b662..165329f6 100644
--- a/packages/documentation/src/Components/Header.stories.tsx
+++ b/packages/documentation/src/Components/Header.stories.tsx
@@ -131,14 +131,14 @@ const CommonTemplate = () => {
 				<Button>Button</Button>
 			</div>
 			<div className="mb-2 flex flex-wrap gap-2">
-				<Anchor link="https://www.google.com">Anchor as a button</Anchor>
-				<Anchor link="https://www.google.com">
+				<Anchor href="https://www.google.com">Anchor as a button</Anchor>
+				<Anchor href="https://www.google.com">
 					Anchor as a button lorem ipsum
 				</Anchor>
-				<Anchor link="https://www.google.com">
+				<Anchor href="https://www.google.com">
 					Anchor as a button lorem ipsum dolor
 				</Anchor>
-				<Anchor link="https://www.google.com">
+				<Anchor href="https://www.google.com">
 					Anchor as a button lorem ipsum dolor sit amet
 				</Anchor>
 			</div>
diff --git a/packages/documentation/src/Styles/DarkMode.stories.tsx b/packages/documentation/src/Styles/DarkMode.stories.tsx
index 95c7d54d..17145313 100644
--- a/packages/documentation/src/Styles/DarkMode.stories.tsx
+++ b/packages/documentation/src/Styles/DarkMode.stories.tsx
@@ -113,14 +113,14 @@ const CommonTemplate = () => {
 				<Button>Button</Button>
 			</div>
 			<div className="mb-2 flex flex-wrap gap-2">
-				<Anchor link="https://www.google.com">Anchor as a button</Anchor>
-				<Anchor link="https://www.google.com">
+				<Anchor href="https://www.google.com">Anchor as a button</Anchor>
+				<Anchor href="https://www.google.com">
 					Anchor as a button lorem ipsum
 				</Anchor>
-				<Anchor link="https://www.google.com">
+				<Anchor href="https://www.google.com">
 					Anchor as a button lorem ipsum dolor
 				</Anchor>
-				<Anchor link="https://www.google.com">
+				<Anchor href="https://www.google.com">
 					Anchor as a button lorem ipsum dolor sit amet
 				</Anchor>
 			</div>
diff --git a/packages/ui-components/src/common/__tests__/utilities.test.tsx b/packages/ui-components/src/common/__tests__/utilities.test.tsx
deleted file mode 100644
index f31a73c4..00000000
--- a/packages/ui-components/src/common/__tests__/utilities.test.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import { describe, expect, it } from "vitest";
-
-import { truncate } from "../utilities";
-
-describe("Non-DOM tests", () => {
-	describe("truncate", () => {
-		it("should truncate according to plan", () => {
-			const STR = "hello world";
-			expect(truncate(STR, 5).truncatedString).toBe("he...");
-			expect(truncate(STR, 7).truncatedString).toBe("hell...");
-			expect(truncate(STR, 10).truncatedString).toBe("hello w...");
-			expect(truncate(STR, 11).truncatedString).toBe(STR);
-			expect(truncate(STR, 12).truncatedString).toBe(STR);
-		});
-	});
-});
diff --git a/packages/ui-components/src/common/utilities.ts b/packages/ui-components/src/common/utilities.ts
deleted file mode 100644
index eacb03ee..00000000
--- a/packages/ui-components/src/common/utilities.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-export const isProd = process.env.NODE_ENV === "production";
-export const isDev = !isProd;
-
-export const truncate = (fullString: string, maxLength: number) => {
-	const ELLIPSIS = "...";
-	const ELLIPSIS_LENGTH = ELLIPSIS.length;
-	const truncatedString =
-		maxLength > ELLIPSIS_LENGTH && fullString.length > maxLength
-			? fullString.substring(0, maxLength - ELLIPSIS_LENGTH) + ELLIPSIS
-			: fullString;
-
-	return {
-		truncatedString,
-		fullString,
-	};
-};
diff --git a/packages/ui-components/src/components/Anchor/Anchor.tsx b/packages/ui-components/src/components/Anchor/Anchor.tsx
index 1d9199a7..d9617830 100644
--- a/packages/ui-components/src/components/Anchor/Anchor.tsx
+++ b/packages/ui-components/src/components/Anchor/Anchor.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 
-import { ButtonLink } from "..";
+import { ButtonLink } from "../Button/ButtonLink";
 import type { AnchorProps } from "./AnchorTypes";
 
 export const Anchor = React.forwardRef<HTMLAnchorElement, AnchorProps>(
diff --git a/packages/ui-components/src/components/Anchor/__tests__/Anchor.test.tsx b/packages/ui-components/src/components/Anchor/__tests__/Anchor.test.tsx
index 98791d25..13cf6cdf 100644
--- a/packages/ui-components/src/components/Anchor/__tests__/Anchor.test.tsx
+++ b/packages/ui-components/src/components/Anchor/__tests__/Anchor.test.tsx
@@ -11,14 +11,14 @@ describe("Anchor (exceptions)", () => {
 
 describe("Anchor modifiers", () => {
 	it("should render a default anchor", async () => {
-		render(<Anchor link="toto">hello</Anchor>);
+		render(<Anchor href="toto">hello</Anchor>);
 		const button = await screen.findByRole("link");
 		expect(button.className).toContain("py-0");
 	});
 
 	it("should render a size small anchor", async () => {
 		render(
-			<Anchor size="small" link="toto">
+			<Anchor size="small" href="toto">
 				hello
 			</Anchor>,
 		);
@@ -28,7 +28,7 @@ describe("Anchor modifiers", () => {
 
 	it("should render a size medium anchor", async () => {
 		render(
-			<Anchor size="medium" link="toto">
+			<Anchor size="medium" href="toto">
 				hello
 			</Anchor>,
 		);
@@ -38,7 +38,7 @@ describe("Anchor modifiers", () => {
 
 	it("should render a size large anchor", async () => {
 		render(
-			<Anchor size="large" link="toto">
+			<Anchor size="large" href="toto">
 				hello
 			</Anchor>,
 		);
@@ -48,7 +48,7 @@ describe("Anchor modifiers", () => {
 
 	it("should render a dark link", async () => {
 		render(
-			<Anchor mode="dark" link="toto">
+			<Anchor mode="dark" href="toto">
 				hello
 			</Anchor>,
 		);
@@ -60,7 +60,7 @@ describe("Anchor modifiers", () => {
 
 	it("should render a light anchor", async () => {
 		render(
-			<Anchor mode="light" link="toto">
+			<Anchor mode="light" href="toto">
 				hello
 			</Anchor>,
 		);
@@ -72,7 +72,7 @@ describe("Anchor modifiers", () => {
 
 	it("should render a fullWidth link", async () => {
 		render(
-			<Anchor fullWidth link="toto">
+			<Anchor fullWidth href="toto">
 				hello
 			</Anchor>,
 		);
@@ -82,19 +82,7 @@ describe("Anchor modifiers", () => {
 
 	it("should render an anchor with truncated text", async () => {
 		render(
-			<Anchor link="toto" maxLabelLength={8}>
-				hello world
-			</Anchor>,
-		);
-		const button = await screen.findByRole("link");
-		expect(button.className).toContain("py-0");
-		const label = await screen.findByText("hello...");
-		expect(label).toBeDefined();
-	});
-
-	it("should render an anchor with full text", async () => {
-		render(
-			<Anchor link="toto" maxLabelLength={11}>
+			<Anchor href="toto" className="w-44">
 				hello world
 			</Anchor>,
 		);
@@ -102,11 +90,12 @@ describe("Anchor modifiers", () => {
 		expect(button.className).toContain("py-0");
 		const label = await screen.findByText("hello world");
 		expect(label).toBeDefined();
+		expect(label.className).toContain("truncate");
 	});
 
 	it("should render an anchor element with a special rel value", async () => {
 		render(
-			<Anchor link="http://www.example.com" target="_blank">
+			<Anchor href="http://www.example.com" target="_blank">
 				Hello World
 			</Anchor>,
 		);
@@ -115,7 +104,7 @@ describe("Anchor modifiers", () => {
 	});
 
 	it("should render an anchor with full text but with truncated class", async () => {
-		render(<Anchor link="toto">hello world</Anchor>);
+		render(<Anchor href="toto">hello world</Anchor>);
 		const button = await screen.findByRole("link");
 		expect(button.className).toContain("py-0");
 		const label = await screen.findByText("hello world");
@@ -125,7 +114,7 @@ describe("Anchor modifiers", () => {
 
 	it("should render an anchor with full text without a truncated class", async () => {
 		render(
-			<Anchor link="toto" noTruncate>
+			<Anchor href="toto" noTruncate>
 				hello world
 			</Anchor>,
 		);
diff --git a/packages/ui-components/src/components/Button/Button.tsx b/packages/ui-components/src/components/Button/Button.tsx
index 891ec981..7270a7d6 100644
--- a/packages/ui-components/src/components/Button/Button.tsx
+++ b/packages/ui-components/src/components/Button/Button.tsx
@@ -7,19 +7,17 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
 	(
 		{
 			children,
-			onClick,
 			disabled = false,
 			mode = "system",
 			focusMode = "system",
 			fullWidth = false,
 			className,
 			size = "medium",
-			type = "button",
 			raw = false,
 			noBorder = false,
-			"aria-label": ariaLabel,
 			spacing,
 			variant = "primary",
+			noTruncate = false,
 
 			...otherProps
 		},
@@ -37,16 +35,14 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
 			noBorder,
 			spacing,
 			variant,
+			noTruncate,
 		});
 
 		return (
 			<button
 				ref={ref}
 				className={buttonClass}
-				onClick={onClick}
 				disabled={disabled}
-				type={type}
-				aria-label={ariaLabel}
 				{...otherProps}
 			>
 				{children}
diff --git a/packages/ui-components/src/components/Button/ButtonLink.tsx b/packages/ui-components/src/components/Button/ButtonLink.tsx
index 6378d7c6..ea9d9d19 100644
--- a/packages/ui-components/src/components/Button/ButtonLink.tsx
+++ b/packages/ui-components/src/components/Button/ButtonLink.tsx
@@ -1,6 +1,6 @@
+import clsx from "clsx";
 import React from "react";
 
-import { truncate } from "../../common/utilities";
 import type { ButtonLinkProps } from "./ButtonTypes";
 import { getButtonClasses, TYPE_LINK } from "./utilities";
 
@@ -15,11 +15,9 @@ export const ButtonLink = React.forwardRef<HTMLAnchorElement, ButtonLinkProps>(
 			size = "small",
 			raw = false,
 			noBorder = false,
-			"aria-label": ariaLabel,
-			link,
 			target,
-			maxLabelLength,
 			noTruncate = false,
+			noNewWindowIcon = false,
 			spacing,
 
 			...otherProps
@@ -37,30 +35,47 @@ export const ButtonLink = React.forwardRef<HTMLAnchorElement, ButtonLinkProps>(
 			size,
 			noBorder,
 			spacing,
+			noTruncate,
 		});
 
-		const formattedLabel =
-			maxLabelLength && typeof children === "string"
-				? truncate(children, maxLabelLength)
-				: null;
+		const newWindow = target === "_blank";
 
 		const extraProps = {
 			target,
-			rel: target === "_blank" ? "noopener noreferrer" : undefined,
+			rel: newWindow ? "noopener noreferrer" : undefined,
 			...otherProps,
 		};
 
+		const labelClass = clsx({
+			truncate: !noTruncate,
+			"basis-11/12": !noTruncate && newWindow,
+		});
+
 		return (
-			<a
-				ref={ref}
-				aria-label={ariaLabel || formattedLabel?.fullString}
-				className={buttonClass}
-				href={link}
-				{...extraProps}
-			>
-				<span {...(!noTruncate && { className: "truncate" })}>
-					{formattedLabel?.truncatedString || children}
-				</span>
+			<a ref={ref} className={buttonClass} {...extraProps}>
+				<div role="text" className="flex items-center justify-center">
+					<div className={labelClass}>
+						{children}
+						{newWindow && (
+							<span className="sr-only">, opens in a new window</span>
+						)}
+					</div>
+					{newWindow && !noNewWindowIcon && (
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							viewBox="0 0 448 512"
+							className="ml-1 size-4 basis-4"
+							fill="currentColor"
+							aria-hidden="true"
+						>
+							<path
+								opacity=".4"
+								d="M384 32c35.3 0 64 28.7 64 64V416c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V96C0 60.7 28.7 32 64 32H384zM160 144c-13.3 0-24 10.7-24 24s10.7 24 24 24h94.1L119 327c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l135-135V328c0 13.3 10.7 24 24 24s24-10.7 24-24V168c0-13.3-10.7-24-24-24H160z"
+							/>
+							<path d="M312 144H160c-13.3 0-24 10.7-24 24s10.7 24 24 24h94.1L119 327c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l135-135V328c0 13.3 10.7 24 24 24s24-10.7 24-24V168c0-13.3-10.7-24-24-24z" />
+						</svg>
+					)}
+				</div>
 			</a>
 		);
 	},
diff --git a/packages/ui-components/src/components/Button/ButtonTypes.d.ts b/packages/ui-components/src/components/Button/ButtonTypes.d.ts
index fcbe67ef..7e0c6a9c 100644
--- a/packages/ui-components/src/components/Button/ButtonTypes.d.ts
+++ b/packages/ui-components/src/components/Button/ButtonTypes.d.ts
@@ -45,6 +45,14 @@ export type ButtonProps = {
 	 * @default false
 	 */
 	disabled?: boolean;
+	/**
+	 * Whether or not to truncate the text automatically. The text will truncate
+	 * only if this prop is not set AND the text is longer than the Component. For the
+	 * text to be longer than the Component, the Component must have a fixed width, potentially
+	 * set by the parent component or its own className prop.
+	 * @default false
+	 */
+	noTruncate?: boolean;
 	/**
 	 * Handler to call when the Button is clicked.
 	 */
@@ -58,23 +66,11 @@ export type ButtonProps = {
 
 export type ButtonLinkProps = {
 	/**
-	 * The children to render.
-	 */
-	children?: React.ReactNode;
-	/**
-	 * The URL to link to.
-	 */
-	link?: string;
-	/**
-	 * The maximum length of the label. If the label is longer than
-	 * this value, it will be truncated.
-	 */
-	maxLabelLength?: number;
-	/**
-	 * Whether or not to truncate the label automatically.
+	 * Whether or not to add an icon indicating that the link
+	 * opens in a new window.
 	 * @default false
 	 */
-	noTruncate?: boolean;
+	noNewWindowIcon?: boolean;
 } & ButtonProps &
 	React.AnchorHTMLAttributes<HTMLAnchorElement>;
 
diff --git a/packages/ui-components/src/components/Button/__tests__/ButtonLink.test.tsx b/packages/ui-components/src/components/Button/__tests__/ButtonLink.test.tsx
index 0dd15bed..a9dd9738 100644
--- a/packages/ui-components/src/components/Button/__tests__/ButtonLink.test.tsx
+++ b/packages/ui-components/src/components/Button/__tests__/ButtonLink.test.tsx
@@ -1,24 +1,18 @@
 import { render, screen } from "@testing-library/react";
 
 import { expectToHaveClasses } from "../../../../../../configuration/tests-helpers";
-import { ButtonLink } from "../..";
-
-describe("ButtonLink (exceptions)", () => {
-	it("should be able to require/import from root", () => {
-		expect(ButtonLink).toBeDefined();
-	});
-});
+import { ButtonLink } from "../ButtonLink";
 
 describe("ButtonLink modifiers", () => {
 	it("should render a default anchor", async () => {
-		render(<ButtonLink link="toto">hello</ButtonLink>);
+		render(<ButtonLink href="toto">hello</ButtonLink>);
 		const button = await screen.findByRole("link");
 		expect(button.className).toContain("py-0");
 	});
 
 	it("should render a size small anchor", async () => {
 		render(
-			<ButtonLink size="small" link="toto">
+			<ButtonLink size="small" href="toto">
 				hello
 			</ButtonLink>,
 		);
@@ -28,7 +22,7 @@ describe("ButtonLink modifiers", () => {
 
 	it("should render a size medium anchor", async () => {
 		render(
-			<ButtonLink size="medium" link="toto">
+			<ButtonLink size="medium" href="toto">
 				hello
 			</ButtonLink>,
 		);
@@ -38,7 +32,7 @@ describe("ButtonLink modifiers", () => {
 
 	it("should render a size large anchor", async () => {
 		render(
-			<ButtonLink size="large" link="toto">
+			<ButtonLink size="large" href="toto">
 				hello
 			</ButtonLink>,
 		);
@@ -48,7 +42,7 @@ describe("ButtonLink modifiers", () => {
 
 	it("should render a dark link", async () => {
 		render(
-			<ButtonLink mode="dark" link="toto">
+			<ButtonLink mode="dark" href="toto">
 				hello
 			</ButtonLink>,
 		);
@@ -60,7 +54,7 @@ describe("ButtonLink modifiers", () => {
 
 	it("should render a light anchor", async () => {
 		render(
-			<ButtonLink mode="light" link="toto">
+			<ButtonLink mode="light" href="toto">
 				hello
 			</ButtonLink>,
 		);
@@ -72,7 +66,7 @@ describe("ButtonLink modifiers", () => {
 
 	it("should render a fullWidth link", async () => {
 		render(
-			<ButtonLink fullWidth link="toto">
+			<ButtonLink fullWidth href="toto">
 				hello
 			</ButtonLink>,
 		);
@@ -82,19 +76,7 @@ describe("ButtonLink modifiers", () => {
 
 	it("should render an anchor with truncated text", async () => {
 		render(
-			<ButtonLink link="toto" maxLabelLength={8}>
-				hello world
-			</ButtonLink>,
-		);
-		const button = await screen.findByRole("link");
-		expect(button.className).toContain("py-0");
-		const label = await screen.findByText("hello...");
-		expect(label).toBeDefined();
-	});
-
-	it("should render an anchor with full text", async () => {
-		render(
-			<ButtonLink link="toto" maxLabelLength={11}>
+			<ButtonLink href="toto" className="w-44">
 				hello world
 			</ButtonLink>,
 		);
@@ -102,11 +84,12 @@ describe("ButtonLink modifiers", () => {
 		expect(button.className).toContain("py-0");
 		const label = await screen.findByText("hello world");
 		expect(label).toBeDefined();
+		expect(label.className).toContain("truncate");
 	});
 
 	it("should render an anchor element with a special rel value", async () => {
 		render(
-			<ButtonLink link="http://www.example.com" target="_blank">
+			<ButtonLink href="http://www.example.com" target="_blank">
 				Hello World
 			</ButtonLink>,
 		);
@@ -115,7 +98,7 @@ describe("ButtonLink modifiers", () => {
 	});
 
 	it("should render an anchor with full text but with truncated class", async () => {
-		render(<ButtonLink link="toto">hello world</ButtonLink>);
+		render(<ButtonLink href="toto">hello world</ButtonLink>);
 		const button = await screen.findByRole("link");
 		expect(button.className).toContain("py-0");
 		const label = await screen.findByText("hello world");
@@ -125,7 +108,7 @@ describe("ButtonLink modifiers", () => {
 
 	it("should render an anchor with full text without a truncated class", async () => {
 		render(
-			<ButtonLink link="toto" noTruncate>
+			<ButtonLink href="toto" noTruncate>
 				hello world
 			</ButtonLink>,
 		);
diff --git a/packages/ui-components/src/components/Button/utilities.ts b/packages/ui-components/src/components/Button/utilities.ts
index 38f2f9c6..1abca326 100644
--- a/packages/ui-components/src/components/Button/utilities.ts
+++ b/packages/ui-components/src/components/Button/utilities.ts
@@ -23,6 +23,7 @@ type getButtonClassesProps = {
 	labelLeft?: string;
 	labelRight?: string;
 	noBackground?: boolean;
+	noTruncate?: boolean;
 	variant?: "primary" | "secondary" | "danger";
 } & SpacingProps;
 
@@ -33,7 +34,7 @@ const getButtonSizesClasses = ({
 	labelLeft,
 }: {
 	size: string;
-	type: string;
+	type: typeof TYPE_BUTTON | typeof TYPE_ICON | typeof TYPE_LINK;
 	labelLeft?: string;
 	labelRight?: string;
 }) => {
@@ -74,11 +75,13 @@ const getButtonSizesClasses = ({
 const getButtonBaseClasses = ({
 	mode,
 	noBackground,
+	noTruncate,
 	variant,
 }: {
 	mode: "dark" | "light" | "system" | "alt-system";
 	variant: "primary" | "secondary" | "danger";
 	noBackground?: boolean;
+	noTruncate?: boolean;
 }) => {
 	if (noBackground) {
 		return "not-prose rounded-full";
@@ -86,6 +89,7 @@ const getButtonBaseClasses = ({
 
 	if (variant === "primary") {
 		return clsx("not-prose rounded-full", {
+			truncate: !noTruncate,
 			"bg-action-dark text-copy-light": mode === "dark",
 			"bg-action-light text-copy-lighter": mode === "light",
 			"bg-action-dark text-copy-light dark:bg-action-light dark:text-copy-lighter":
@@ -96,6 +100,7 @@ const getButtonBaseClasses = ({
 	}
 	if (variant === "secondary") {
 		return clsx("not-prose rounded-full", {
+			truncate: !noTruncate,
 			"bg-action-dark text-copy-light": mode === "light",
 			"bg-action-light text-copy-lighter": mode === "dark",
 			"bg-action-dark text-copy-light dark:bg-action-light dark:text-copy-lighter":
@@ -106,6 +111,7 @@ const getButtonBaseClasses = ({
 	}
 	if (variant === "danger") {
 		return clsx("not-prose rounded-full", {
+			truncate: !noTruncate,
 			"bg-action-danger-dark text-copy-light": mode === "dark",
 			"bg-action-danger-light text-copy-lighter": mode === "light",
 			"bg-action-danger-dark text-copy-light dark:bg-action-danger-light dark:text-copy-lighter":
@@ -272,6 +278,7 @@ export const getButtonClasses = ({
 	spacing,
 	noBackground,
 	variant,
+	noTruncate,
 }: getButtonClassesProps) => {
 	if (!variant) {
 		variant = "primary";
@@ -282,7 +289,7 @@ export const getButtonClasses = ({
 				BUTTON_CLASSNAME,
 				className,
 				getSpacing(spacing),
-				getButtonBaseClasses({ mode, variant, noBackground }),
+				getButtonBaseClasses({ mode, variant, noBackground, noTruncate }),
 				getButtonSizesClasses({ type, size, labelRight, labelLeft }),
 				getButtonBorderClasses({ mode, variant, noBorder }),
 				getButtonFocusClasses({ focusMode }),
diff --git a/packages/ui-components/src/components/index.ts b/packages/ui-components/src/components/index.ts
index 77e9d35e..12495c22 100644
--- a/packages/ui-components/src/components/index.ts
+++ b/packages/ui-components/src/components/index.ts
@@ -2,7 +2,6 @@ import { Anchor } from "./Anchor/Anchor";
 import { Bubble } from "./Bubble/Bubble";
 import { Button } from "./Button/Button";
 import { ButtonIcon } from "./Button/ButtonIcon";
-import { ButtonLink } from "./Button/ButtonLink";
 import { Card } from "./Card/Card";
 import { Footer } from "./Footer/Footer";
 import { Header } from "./Header/Header";
@@ -27,7 +26,6 @@ export {
 	Bubble,
 	Button,
 	ButtonIcon,
-	ButtonLink,
 	Card,
 	Footer,
 	Header,