diff --git a/src/components/styled/link.css b/src/components/styled/link.css
index e0c0eac4dce..27c3d9b04dd 100644
--- a/src/components/styled/link.css
+++ b/src/components/styled/link.css
@@ -11,6 +11,18 @@
   &-neutral {
     @apply text-neutral hover:text-neutral-focus;
   }
+  &-success {
+    @apply text-success hover:text-success;
+  }
+  &-info {
+    @apply text-info hover:text-info;
+  }
+  &-warning {
+    @apply text-warning hover:text-warning;
+  }
+  &-error {
+    @apply text-error hover:text-error;
+  }
   &:focus {
     @apply outline-none;
   }
diff --git a/src/docs/src/routes/components/link.svelte.md b/src/docs/src/routes/components/link.svelte.md
index 1c4d9ce2339..fc275b14c15 100644
--- a/src/docs/src/routes/components/link.svelte.md
+++ b/src/docs/src/routes/components/link.svelte.md
@@ -14,10 +14,14 @@ published: true
 <ClassTable
 data="{[
   { type:'component', class: 'link', desc: 'Adds underline to a text' },
+  { type:'modifier', class: 'link-neutral', desc: 'Link with `neutral` color' },
   { type:'modifier', class: 'link-primary', desc: 'Link with `primary` color' },
   { type:'modifier', class: 'link-secondary', desc: 'Link with `secondary` color' },
   { type:'modifier', class: 'link-accent', desc: 'Link with `accent` color' },
-  { type:'modifier', class: 'link-neutral', desc: 'Link with `neutral` color' },
+  { type:'modifier', class: 'link-success', desc: 'Link with `success` color' },
+  { type:'modifier', class: 'link-info', desc: 'Link with `info` color' },
+  { type:'modifier', class: 'link-warning', desc: 'Link with `warning` color' },
+  { type:'modifier', class: 'link-error', desc: 'Link with `error` color' },
   { type:'modifier', class: 'link-hover', desc: 'Only show underline on hover' },
 ]}"
 />
@@ -94,6 +98,46 @@ data="{[
 }</pre>
 </Component>
 
+<Component title="Success color">
+<a class="link link-success">I'm a simple link</a>
+<pre slot="html" use:replace={{ to: $prefix }}>{
+`<a class="$$link $$link-success">I'm a simple link</a>`
+}</pre>
+<pre slot="react" use:replace={{ to: $prefix }}>{
+`<a className="$$link $$link-success">I'm a simple link</a>`
+}</pre>
+</Component>
+
+<Component title="Info color">
+<a class="link link-info">I'm a simple link</a>
+<pre slot="html" use:replace={{ to: $prefix }}>{
+`<a class="$$link $$link-info">I'm a simple link</a>`
+}</pre>
+<pre slot="react" use:replace={{ to: $prefix }}>{
+`<a className="$$link $$link-info">I'm a simple link</a>`
+}</pre>
+</Component>
+
+<Component title="Warning color">
+<a class="link link-warning">I'm a simple link</a>
+<pre slot="html" use:replace={{ to: $prefix }}>{
+`<a class="$$link $$link-warning">I'm a simple link</a>`
+}</pre>
+<pre slot="react" use:replace={{ to: $prefix }}>{
+`<a className="$$link $$link-warning">I'm a simple link</a>`
+}</pre>
+</Component>
+
+<Component title="Error color">
+<a class="link link-error">I'm a simple link</a>
+<pre slot="html" use:replace={{ to: $prefix }}>{
+`<a class="$$link $$link-error">I'm a simple link</a>`
+}</pre>
+<pre slot="react" use:replace={{ to: $prefix }}>{
+`<a className="$$link $$link-error">I'm a simple link</a>`
+}</pre>
+</Component>
+
 <Component title="Show underline only on hover">
 <a class="link link-hover">I'm a simple link</a>
 <pre slot="html" use:replace={{ to: $prefix }}>{