diff --git a/libs/components/src/link/link.component.html b/libs/components/src/link/link.component.html
index 21bc1ec38c3..1e6afd1458d 100644
--- a/libs/components/src/link/link.component.html
+++ b/libs/components/src/link/link.component.html
@@ -1,9 +1,11 @@
-@if (startIcon()) {
-
-}
-
-
+
+ @if (startIcon()) {
+
+ }
+
+
+
+ @if (endIcon()) {
+
+ }
-@if (endIcon()) {
-
-}
diff --git a/libs/components/src/link/link.component.ts b/libs/components/src/link/link.component.ts
index 227fc6615a8..3a2abf9a25c 100644
--- a/libs/components/src/link/link.component.ts
+++ b/libs/components/src/link/link.component.ts
@@ -51,9 +51,6 @@ const commonStyles = [
"tw-border-0",
"tw-border-none",
"tw-rounded",
- "tw-inline-flex",
- "tw-items-center",
- "tw-gap-2",
"tw-transition",
"tw-no-underline",
"tw-cursor-pointer",
@@ -137,7 +134,9 @@ export class LinkComponent {
readonly classList = computed(() => {
const verticalInset = this.isButton ? "0.25rem" : "0.125rem";
- return [`before:-tw-inset-y-[${verticalInset}]`]
+ const displayStyle = this.isButton ? "inline-block" : "inline-flex";
+
+ return [`before:-tw-inset-y-[${verticalInset}]`, `tw-${displayStyle}`]
.concat(commonStyles)
.concat(linkStyles[this.linkType()] ?? []);
});
diff --git a/libs/components/src/link/link.stories.ts b/libs/components/src/link/link.stories.ts
index 65fa522d7a2..209f247c3a6 100644
--- a/libs/components/src/link/link.stories.ts
+++ b/libs/components/src/link/link.stories.ts
@@ -261,7 +261,7 @@ export const WithIcons: Story = {
External link