diff --git a/apps/volt/doc/button/IconOnlyDoc.vue b/apps/volt/doc/button/IconOnlyDoc.vue
index c5f58efb7..1014eee63 100644
--- a/apps/volt/doc/button/IconOnlyDoc.vue
+++ b/apps/volt/doc/button/IconOnlyDoc.vue
@@ -9,56 +9,37 @@
 
         <div class="flex flex-wrap justify-center gap-4 mb-6">
             <Button icon="pi pi-check" aria-label="Filter" :size="size" />
-            <Button icon="pi pi-bookmark" severity="secondary" aria-label="Bookmark" :size="size" />
-            <Button icon="pi pi-search" severity="success" aria-label="Search" :size="size" />
-            <Button icon="pi pi-user" severity="info" aria-label="User" :size="size" />
-            <Button icon="pi pi-bell" severity="warn" aria-label="Notification" :size="size" />
-            <Button icon="pi pi-heart" severity="help" aria-label="Favorite" :size="size" />
-            <Button icon="pi pi-times" severity="danger" aria-label="Cancel" :size="size" />
-            <Button icon="pi pi-star" severity="contrast" aria-label="Star" :size="size" />
+            <SecondaryButton icon="pi pi-bookmark" severity="secondary" aria-label="Bookmark" :size="size" />
+            <ContrastButton icon="pi pi-search" severity="success" aria-label="Search" :size="size" />
+            <DangerButton icon="pi pi-times" severity="info" aria-label="User" :size="size" />
         </div>
 
         <div class="flex flex-wrap justify-center gap-4 mb-6">
-            <Button icon="pi pi-check" rounded aria-label="Filter" :size="size" />
-            <Button icon="pi pi-bookmark" severity="secondary" rounded aria-label="Bookmark" :size="size" />
-            <Button icon="pi pi-search" severity="success" rounded aria-label="Search" :size="size" />
-            <Button icon="pi pi-user" severity="info" rounded aria-label="User" :size="size" />
-            <Button icon="pi pi-bell" severity="warn" rounded aria-label="Notification" :size="size" />
-            <Button icon="pi pi-heart" severity="help" rounded aria-label="Favorite" :size="size" />
-            <Button icon="pi pi-times" severity="danger" rounded aria-label="Cancel" :size="size" />
-            <Button icon="pi pi-star" severity="contrast" rounded aria-label="Star" :size="size" />
+            <Button icon="pi pi-check" aria-label="Filter" :size="size" rounded />
+            <SecondaryButton icon="pi pi-bookmark" severity="secondary" aria-label="Bookmark" :size="size" rounded />
+            <ContrastButton icon="pi pi-search" severity="success" aria-label="Search" :size="size" rounded />
+            <DangerButton icon="pi pi-times" severity="info" aria-label="User" :size="size" rounded />
         </div>
 
         <div class="flex flex-wrap justify-center gap-4 mb-6">
-            <Button icon="pi pi-check" rounded variant="outlined" aria-label="Filter" :size="size" /> <Button icon="pi pi-bookmark" severity="secondary" rounded variant="outlined" aria-label="Bookmark" :size="size" />
-            <Button icon="pi pi-search" severity="success" rounded variant="outlined" aria-label="Search" :size="size" />
-            <Button icon="pi pi-user" severity="info" rounded variant="outlined" aria-label="User" :size="size" />
-            <Button icon="pi pi-bell" severity="warn" rounded variant="outlined" aria-label="Notification" :size="size" />
-            <Button icon="pi pi-heart" severity="help" rounded variant="outlined" aria-label="Favorite" :size="size" />
-            <Button icon="pi pi-times" severity="danger" rounded variant="outlined" aria-label="Cancel" :size="size" />
-            <Button icon="pi pi-star" severity="contrast" rounded variant="outlined" aria-label="Star" :size="size" />
+            <Button icon="pi pi-check" aria-label="Filter" :size="size" variant="outlined" rounded />
+            <SecondaryButton icon="pi pi-bookmark" severity="secondary" aria-label="Bookmark" :size="size" variant="outlined" rounded />
+            <ContrastButton icon="pi pi-search" severity="success" aria-label="Search" :size="size" variant="outlined" rounded />
+            <DangerButton icon="pi pi-times" severity="info" aria-label="User" :size="size" variant="outlined" rounded />
         </div>
 
         <div class="flex flex-wrap justify-center gap-4 mb-6">
-            <Button icon="pi pi-check" variant="text" raised rounded aria-label="Filter" :size="size" />
-            <Button icon="pi pi-bookmark" severity="secondary" variant="text" raised rounded aria-label="Bookmark" :size="size" />
-            <Button icon="pi pi-search" severity="success" variant="text" raised rounded aria-label="Search" :size="size" />
-            <Button icon="pi pi-user" severity="info" variant="text" raised rounded aria-label="User" :size="size" />
-            <Button icon="pi pi-bell" severity="warn" variant="text" raised rounded aria-label="Notification" :size="size" />
-            <Button icon="pi pi-heart" severity="help" variant="text" raised rounded aria-label="Favorite" :size="size" />
-            <Button icon="pi pi-times" severity="danger" variant="text" raised rounded aria-label="Cancel" :size="size" />
-            <Button icon="pi pi-star" severity="contrast" variant="text" raised rounded aria-label="Star" :size="size" />
+            <Button icon="pi pi-check" aria-label="Filter" :size="size" variant="text" rounded />
+            <SecondaryButton icon="pi pi-bookmark" severity="secondary" aria-label="Bookmark" :size="size" variant="text" rounded />
+            <ContrastButton icon="pi pi-search" severity="success" aria-label="Search" :size="size" variant="text" rounded />
+            <DangerButton icon="pi pi-times" severity="info" aria-label="User" :size="size" variant="text" rounded />
         </div>
 
-        <div class="flex flex-wrap justify-center gap-4">
-            <Button icon="pi pi-check" variant="text" rounded aria-label="Filter" :size="size" />
-            <Button icon="pi pi-bookmark" severity="secondary" variant="text" rounded aria-label="Bookmark" :size="size" />
-            <Button icon="pi pi-search" severity="success" variant="text" rounded aria-label="Search" :size="size" />
-            <Button icon="pi pi-user" severity="info" variant="text" rounded aria-label="User" :size="size" />
-            <Button icon="pi pi-bell" severity="warn" variant="text" rounded aria-label="Notification" :size="size" />
-            <Button icon="pi pi-heart" severity="help" variant="text" rounded aria-label="Favorite" :size="size" />
-            <Button icon="pi pi-times" severity="danger" variant="text" rounded aria-label="Cancel" :size="size" />
-            <Button icon="pi pi-star" severity="contrast" variant="text" rounded aria-label="Star" :size="size" />
+        <div class="flex flex-wrap justify-center gap-4 mb-6">
+            <Button icon="pi pi-check" aria-label="Filter" :size="size" variant="text" raised rounded />
+            <SecondaryButton icon="pi pi-bookmark" severity="secondary" aria-label="Bookmark" :size="size" variant="text" raised rounded />
+            <ContrastButton icon="pi pi-search" severity="success" aria-label="Search" :size="size" variant="text" raised rounded />
+            <DangerButton icon="pi pi-times" severity="info" aria-label="User" :size="size" variant="text" raised rounded />
         </div>
     </div>
     <DocSectionCode :code="code" />
@@ -66,6 +47,9 @@
 
 <script setup>
 import Button from '@/volt/button';
+import ContrastButton from '@/volt/button/contrast';
+import DangerButton from '@/volt/button/danger';
+import SecondaryButton from '@/volt/button/secondary';
 import SelectButton from '@/volt/selectbutton';
 import { ref } from 'vue';
 
@@ -85,62 +69,46 @@ const code = ref(`
 
         <div class="flex flex-wrap justify-center gap-4 mb-6">
             <Button icon="pi pi-check" aria-label="Filter" :size="size" />
-            <Button icon="pi pi-bookmark" severity="secondary" aria-label="Bookmark" :size="size" />
-            <Button icon="pi pi-search" severity="success" aria-label="Search" :size="size" />
-            <Button icon="pi pi-user" severity="info" aria-label="User" :size="size" />
-            <Button icon="pi pi-bell" severity="warn" aria-label="Notification" :size="size" />
-            <Button icon="pi pi-heart" severity="help" aria-label="Favorite" :size="size" />
-            <Button icon="pi pi-times" severity="danger" aria-label="Cancel" :size="size" />
-            <Button icon="pi pi-star" severity="contrast" aria-label="Star" :size="size" />
+            <SecondaryButton icon="pi pi-bookmark" severity="secondary" aria-label="Bookmark" :size="size" />
+            <ContrastButton icon="pi pi-search" severity="success" aria-label="Search" :size="size" />
+            <DangerButton icon="pi pi-times" severity="info" aria-label="User" :size="size" />
         </div>
 
         <div class="flex flex-wrap justify-center gap-4 mb-6">
-            <Button icon="pi pi-check" rounded aria-label="Filter" :size="size" />
-            <Button icon="pi pi-bookmark" severity="secondary" rounded aria-label="Bookmark" :size="size" />
-            <Button icon="pi pi-search" severity="success" rounded aria-label="Search" :size="size" />
-            <Button icon="pi pi-user" severity="info" rounded aria-label="User" :size="size" />
-            <Button icon="pi pi-bell" severity="warn" rounded aria-label="Notification" :size="size" />
-            <Button icon="pi pi-heart" severity="help" rounded aria-label="Favorite" :size="size" />
-            <Button icon="pi pi-times" severity="danger" rounded aria-label="Cancel" :size="size" />
-            <Button icon="pi pi-star" severity="contrast" rounded aria-label="Star" :size="size" />
+            <Button icon="pi pi-check" aria-label="Filter" :size="size" rounded />
+            <SecondaryButton icon="pi pi-bookmark" severity="secondary" aria-label="Bookmark" :size="size" rounded />
+            <ContrastButton icon="pi pi-search" severity="success" aria-label="Search" :size="size" rounded />
+            <DangerButton icon="pi pi-times" severity="info" aria-label="User" :size="size" rounded />
         </div>
 
         <div class="flex flex-wrap justify-center gap-4 mb-6">
-            <Button icon="pi pi-check" rounded variant="outlined" aria-label="Filter" :size="size" /> <Button icon="pi pi-bookmark" severity="secondary" rounded variant="outlined" aria-label="Bookmark" :size="size" />
-            <Button icon="pi pi-search" severity="success" rounded variant="outlined" aria-label="Search" :size="size" />
-            <Button icon="pi pi-user" severity="info" rounded variant="outlined" aria-label="User" :size="size" />
-            <Button icon="pi pi-bell" severity="warn" rounded variant="outlined" aria-label="Notification" :size="size" />
-            <Button icon="pi pi-heart" severity="help" rounded variant="outlined" aria-label="Favorite" :size="size" />
-            <Button icon="pi pi-times" severity="danger" rounded variant="outlined" aria-label="Cancel" :size="size" />
-            <Button icon="pi pi-star" severity="contrast" rounded variant="outlined" aria-label="Star" :size="size" />
+            <Button icon="pi pi-check" aria-label="Filter" :size="size" variant="outlined" rounded />
+            <SecondaryButton icon="pi pi-bookmark" severity="secondary" aria-label="Bookmark" :size="size" variant="outlined" rounded />
+            <ContrastButton icon="pi pi-search" severity="success" aria-label="Search" :size="size" variant="outlined" rounded />
+            <DangerButton icon="pi pi-times" severity="info" aria-label="User" :size="size" variant="outlined" rounded />
         </div>
 
         <div class="flex flex-wrap justify-center gap-4 mb-6">
-            <Button icon="pi pi-check" variant="text" raised rounded aria-label="Filter" :size="size" />
-            <Button icon="pi pi-bookmark" severity="secondary" variant="text" raised rounded aria-label="Bookmark" :size="size" />
-            <Button icon="pi pi-search" severity="success" variant="text" raised rounded aria-label="Search" :size="size" />
-            <Button icon="pi pi-user" severity="info" variant="text" raised rounded aria-label="User" :size="size" />
-            <Button icon="pi pi-bell" severity="warn" variant="text" raised rounded aria-label="Notification" :size="size" />
-            <Button icon="pi pi-heart" severity="help" variant="text" raised rounded aria-label="Favorite" :size="size" />
-            <Button icon="pi pi-times" severity="danger" variant="text" raised rounded aria-label="Cancel" :size="size" />
-            <Button icon="pi pi-star" severity="contrast" variant="text" raised rounded aria-label="Star" :size="size" />
+            <Button icon="pi pi-check" aria-label="Filter" :size="size" variant="text" rounded />
+            <SecondaryButton icon="pi pi-bookmark" severity="secondary" aria-label="Bookmark" :size="size" variant="text" rounded />
+            <ContrastButton icon="pi pi-search" severity="success" aria-label="Search" :size="size" variant="text" rounded />
+            <DangerButton icon="pi pi-times" severity="info" aria-label="User" :size="size" variant="text" rounded />
         </div>
 
-        <div class="flex flex-wrap justify-center gap-4">
-            <Button icon="pi pi-check" variant="text" rounded aria-label="Filter" :size="size" />
-            <Button icon="pi pi-bookmark" severity="secondary" variant="text" rounded aria-label="Bookmark" :size="size" />
-            <Button icon="pi pi-search" severity="success" variant="text" rounded aria-label="Search" :size="size" />
-            <Button icon="pi pi-user" severity="info" variant="text" rounded aria-label="User" :size="size" />
-            <Button icon="pi pi-bell" severity="warn" variant="text" rounded aria-label="Notification" :size="size" />
-            <Button icon="pi pi-heart" severity="help" variant="text" rounded aria-label="Favorite" :size="size" />
-            <Button icon="pi pi-times" severity="danger" variant="text" rounded aria-label="Cancel" :size="size" />
-            <Button icon="pi pi-star" severity="contrast" variant="text" rounded aria-label="Star" :size="size" />
+        <div class="flex flex-wrap justify-center gap-4 mb-6">
+            <Button icon="pi pi-check" aria-label="Filter" :size="size" variant="text" raised rounded />
+            <SecondaryButton icon="pi pi-bookmark" severity="secondary" aria-label="Bookmark" :size="size" variant="text" raised rounded />
+            <ContrastButton icon="pi pi-search" severity="success" aria-label="Search" :size="size" variant="text" raised rounded />
+            <DangerButton icon="pi pi-times" severity="info" aria-label="User" :size="size" variant="text" raised rounded />
         </div>
     </div>
 </template>
 
 <script setup>
 import Button from '@/volt/button';
+import ContrastButton from '@/volt/button/contrast';
+import DangerButton from '@/volt/button/danger';
+import SecondaryButton from '@/volt/button/secondary';
 import SelectButton from '@/volt/selectbutton';
 import { ref } from 'vue';
 
diff --git a/apps/volt/doc/button/ImportDoc.vue b/apps/volt/doc/button/ImportDoc.vue
index afeb349e3..ef4a48713 100644
--- a/apps/volt/doc/button/ImportDoc.vue
+++ b/apps/volt/doc/button/ImportDoc.vue
@@ -8,6 +8,9 @@ export default {
     data() {
         return {
             code: `import Button from '@/volt/button';
+import SecondaryButton from '@/volt/button/secondary';
+import ContrastButton from '@/volt/button/contrast';
+import DangerButton from '@/volt/button/danger';
 `
         };
     }
diff --git a/apps/volt/doc/button/LinkDoc.vue b/apps/volt/doc/button/LinkDoc.vue
deleted file mode 100644
index 67c47a1ca..000000000
--- a/apps/volt/doc/button/LinkDoc.vue
+++ /dev/null
@@ -1,36 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>The button element can be displayed as a link element, and similarly a regular link can be styled as a button.</p>
-    </DocSectionText>
-    <div class="card flex justify-center gap-4">
-        <Button label="Link" variant="link" />
-        <RouterLink
-            to="/"
-            class="bg-primary hover:bg-primary-emphasis active:bg-primary-emphasis-alt text-primary-contrast px-3 py-2 gap-2 rounded-md font-medium focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary"
-            >Router</RouterLink
-        >
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script setup>
-import Button from '@/volt/button';
-import { ref } from 'vue';
-
-const code = ref(`
-<template>
-    <div class="card flex justify-center gap-4">
-        <Button label="Link" variant="link" />
-        <RouterLink
-            to="/"
-            class="bg-primary hover:bg-primary-emphasis active:bg-primary-emphasis-alt text-primary-contrast px-3 py-2 gap-2 rounded-md font-medium focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary"
-            >Router</RouterLink
-        >
-    </div>
-</template>
-
-<script setup>
-import Button from '@/volt/button';
-<\/script>
-`);
-</script>
diff --git a/apps/volt/doc/button/OutlinedDoc.vue b/apps/volt/doc/button/OutlinedDoc.vue
index 0f342b17f..aaccac7a9 100644
--- a/apps/volt/doc/button/OutlinedDoc.vue
+++ b/apps/volt/doc/button/OutlinedDoc.vue
@@ -4,37 +4,35 @@
     </DocSectionText>
     <div class="card flex justify-center flex-wrap gap-4">
         <Button label="Primary" variant="outlined" />
-        <Button label="Secondary" severity="secondary" variant="outlined" />
-        <Button label="Success" severity="success" variant="outlined" />
-        <Button label="Info" severity="info" variant="outlined" />
-        <Button label="Warn" severity="warn" variant="outlined" />
-        <Button label="Help" severity="help" variant="outlined" />
-        <Button label="Danger" severity="danger" variant="outlined" />
-        <Button label="Contrast" severity="contrast" variant="outlined" />
+        <SecondaryButton label="Secondary" variant="outlined" />
+        <ContrastButton label="Contrast" variant="outlined" />
+        <DangerButton label="Danger" variant="outlined" />
     </div>
     <DocSectionCode :code="code" />
 </template>
 
 <script setup>
 import Button from '@/volt/button';
+import ContrastButton from '@/volt/button/contrast';
+import DangerButton from '@/volt/button/danger';
+import SecondaryButton from '@/volt/button/secondary';
 import { ref } from 'vue';
 
 const code = ref(`
 <template>
     <div class="card flex justify-center flex-wrap gap-4">
         <Button label="Primary" variant="outlined" />
-        <Button label="Secondary" severity="secondary" variant="outlined" />
-        <Button label="Success" severity="success" variant="outlined" />
-        <Button label="Info" severity="info" variant="outlined" />
-        <Button label="Warn" severity="warn" variant="outlined" />
-        <Button label="Help" severity="help" variant="outlined" />
-        <Button label="Danger" severity="danger" variant="outlined" />
-        <Button label="Contrast" severity="contrast" variant="outlined" />
+        <SecondaryButton label="Secondary" variant="outlined" />
+        <ContrastButton label="Contrast" variant="outlined" />
+        <DangerButton label="Danger" variant="outlined" />
     </div>
 </template>
 
 <script setup>
 import Button from '@/volt/button';
+import ContrastButton from '@/volt/button/contrast';
+import DangerButton from '@/volt/button/danger';
+import SecondaryButton from '@/volt/button/secondary';
 <\/script>
 `);
 </script>
diff --git a/apps/volt/doc/button/RaisedDoc.vue b/apps/volt/doc/button/RaisedDoc.vue
index a3902a0d2..18dd821ab 100644
--- a/apps/volt/doc/button/RaisedDoc.vue
+++ b/apps/volt/doc/button/RaisedDoc.vue
@@ -4,37 +4,35 @@
     </DocSectionText>
     <div class="card flex justify-center flex-wrap gap-4">
         <Button label="Primary" raised />
-        <Button label="Secondary" severity="secondary" raised />
-        <Button label="Success" severity="success" raised />
-        <Button label="Info" severity="info" raised />
-        <Button label="Warn" severity="warn" raised />
-        <Button label="Help" severity="help" raised />
-        <Button label="Danger" severity="danger" raised />
-        <Button label="Contrast" severity="contrast" raised />
+        <SecondaryButton label="Secondary" raised />
+        <ContrastButton label="Contrast" raised />
+        <DangerButton label="Danger" raised />
     </div>
     <DocSectionCode :code="code" />
 </template>
 
 <script setup>
 import Button from '@/volt/button';
+import ContrastButton from '@/volt/button/contrast';
+import DangerButton from '@/volt/button/danger';
+import SecondaryButton from '@/volt/button/secondary';
 import { ref } from 'vue';
 
 const code = ref(`
 <template>
     <div class="card flex justify-center flex-wrap gap-4">
         <Button label="Primary" raised />
-        <Button label="Secondary" severity="secondary" raised />
-        <Button label="Success" severity="success" raised />
-        <Button label="Info" severity="info" raised />
-        <Button label="Warn" severity="warn" raised />
-        <Button label="Help" severity="help" raised />
-        <Button label="Danger" severity="danger" raised />
-        <Button label="Contrast" severity="contrast" raised />
+        <SecondaryButton label="Secondary" raised />
+        <ContrastButton label="Contrast" raised />
+        <DangerButton label="Danger" raised />
     </div>
 </template>
 
 <script setup>
 import Button from '@/volt/button';
+import ContrastButton from '@/volt/button/contrast';
+import DangerButton from '@/volt/button/danger';
+import SecondaryButton from '@/volt/button/secondary';
 <\/script>
 `);
 </script>
diff --git a/apps/volt/doc/button/RaisedTextDoc.vue b/apps/volt/doc/button/RaisedTextDoc.vue
index b37cb14bf..1d94027e9 100644
--- a/apps/volt/doc/button/RaisedTextDoc.vue
+++ b/apps/volt/doc/button/RaisedTextDoc.vue
@@ -4,37 +4,35 @@
     </DocSectionText>
     <div class="card flex justify-center flex-wrap gap-4">
         <Button label="Primary" variant="text" raised />
-        <Button label="Secondary" severity="secondary" variant="text" raised />
-        <Button label="Success" severity="success" variant="text" raised />
-        <Button label="Info" severity="info" variant="text" raised />
-        <Button label="Warn" severity="warn" variant="text" raised />
-        <Button label="Help" severity="help" variant="text" raised />
-        <Button label="Danger" severity="danger" variant="text" raised />
-        <Button label="Contrast" severity="contrast" variant="text" raised />
+        <SecondaryButton label="Secondary" variant="text" raised />
+        <ContrastButton label="Contrast" variant="text" raised />
+        <DangerButton label="Danger" variant="text" raised />
     </div>
     <DocSectionCode :code="code" />
 </template>
 
 <script setup>
 import Button from '@/volt/button';
+import ContrastButton from '@/volt/button/contrast';
+import DangerButton from '@/volt/button/danger';
+import SecondaryButton from '@/volt/button/secondary';
 import { ref } from 'vue';
 
 const code = ref(`
 <template>
-    <div class="card flex justify-center flex-wrap gap-4">
+   <div class="card flex justify-center flex-wrap gap-4">
         <Button label="Primary" variant="text" raised />
-        <Button label="Secondary" severity="secondary" variant="text" raised />
-        <Button label="Success" severity="success" variant="text" raised />
-        <Button label="Info" severity="info" variant="text" raised />
-        <Button label="Warn" severity="warn" variant="text" raised />
-        <Button label="Help" severity="help" variant="text" raised />
-        <Button label="Danger" severity="danger" variant="text" raised />
-        <Button label="Contrast" severity="contrast" variant="text" raised />
+        <SecondaryButton label="Secondary" variant="text" raised />
+        <ContrastButton label="Contrast" variant="text" raised />
+        <DangerButton label="Danger" variant="text" raised />
     </div>
 </template>
 
 <script setup>
 import Button from '@/volt/button';
+import ContrastButton from '@/volt/button/contrast';
+import DangerButton from '@/volt/button/danger';
+import SecondaryButton from '@/volt/button/secondary';
 <\/script>
 `);
 </script>
diff --git a/apps/volt/doc/button/RoundedDoc.vue b/apps/volt/doc/button/RoundedDoc.vue
index f2ce0140f..b191e8d0a 100644
--- a/apps/volt/doc/button/RoundedDoc.vue
+++ b/apps/volt/doc/button/RoundedDoc.vue
@@ -4,37 +4,35 @@
     </DocSectionText>
     <div class="card flex justify-center flex-wrap gap-4">
         <Button label="Primary" rounded />
-        <Button label="Secondary" severity="secondary" rounded />
-        <Button label="Success" severity="success" rounded />
-        <Button label="Info" severity="info" rounded />
-        <Button label="Warn" severity="warn" rounded />
-        <Button label="Help" severity="help" rounded />
-        <Button label="Danger" severity="danger" rounded />
-        <Button label="Contrast" severity="contrast" rounded />
+        <SecondaryButton label="Secondary" rounded />
+        <ContrastButton label="Contrast" rounded />
+        <DangerButton label="Danger" rounded />
     </div>
     <DocSectionCode :code="code" />
 </template>
 
 <script setup>
 import Button from '@/volt/button';
+import ContrastButton from '@/volt/button/contrast';
+import DangerButton from '@/volt/button/danger';
+import SecondaryButton from '@/volt/button/secondary';
 import { ref } from 'vue';
 
 const code = ref(`
 <template>
     <div class="card flex justify-center flex-wrap gap-4">
         <Button label="Primary" rounded />
-        <Button label="Secondary" severity="secondary" rounded />
-        <Button label="Success" severity="success" rounded />
-        <Button label="Info" severity="info" rounded />
-        <Button label="Warn" severity="warn" rounded />
-        <Button label="Help" severity="help" rounded />
-        <Button label="Danger" severity="danger" rounded />
-        <Button label="Contrast" severity="contrast" rounded />
+        <SecondaryButton label="Secondary" rounded />
+        <ContrastButton label="Contrast" rounded />
+        <DangerButton label="Danger" rounded />
     </div>
 </template>
 
 <script setup>
 import Button from '@/volt/button';
+import ContrastButton from '@/volt/button/contrast';
+import DangerButton from '@/volt/button/danger';
+import SecondaryButton from '@/volt/button/secondary';
 <\/script>
 `);
 </script>
diff --git a/apps/volt/doc/button/SeverityDoc.vue b/apps/volt/doc/button/SeverityDoc.vue
index 03abca029..a5d0faa1b 100644
--- a/apps/volt/doc/button/SeverityDoc.vue
+++ b/apps/volt/doc/button/SeverityDoc.vue
@@ -1,40 +1,38 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>The <i>severity</i> property defines the variant of a button.</p>
+        <p>Secondary, Contrast and Danger buttons are available as separate components for severity alternatives.</p>
     </DocSectionText>
     <div class="card flex justify-center flex-wrap gap-4">
         <Button label="Primary" />
-        <Button label="Secondary" severity="secondary" />
-        <Button label="Success" severity="success" />
-        <Button label="Info" severity="info" />
-        <Button label="Warn" severity="warn" />
-        <Button label="Help" severity="help" />
-        <Button label="Danger" severity="danger" />
-        <Button label="Contrast" severity="contrast" />
+        <SecondaryButton label="Secondary" />
+        <ContrastButton label="Contrast" />
+        <DangerButton label="Danger" />
     </div>
     <DocSectionCode :code="code" />
 </template>
 
 <script setup>
 import Button from '@/volt/button';
+import ContrastButton from '@/volt/button/contrast';
+import DangerButton from '@/volt/button/danger';
+import SecondaryButton from '@/volt/button/secondary';
 import { ref } from 'vue';
 
 const code = ref(`
 <template>
     <div class="card flex justify-center flex-wrap gap-4">
         <Button label="Primary" />
-        <Button label="Secondary" severity="secondary" />
-        <Button label="Success" severity="success" />
-        <Button label="Info" severity="info" />
-        <Button label="Warn" severity="warn" />
-        <Button label="Help" severity="help" />
-        <Button label="Danger" severity="danger" />
-        <Button label="Contrast" severity="contrast" />
+        <SecondaryButton label="Secondary" />
+        <ContrastButton label="Contrast" />
+        <DangerButton label="Danger" />
     </div>
 </template>
 
 <script setup>
 import Button from '@/volt/button';
+import ContrastButton from '@/volt/button/contrast';
+import DangerButton from '@/volt/button/danger';
+import SecondaryButton from '@/volt/button/secondary';
 <\/script>
 `);
 </script>
diff --git a/apps/volt/doc/button/TextDoc.vue b/apps/volt/doc/button/TextDoc.vue
index 199ef565a..14e92ff8a 100644
--- a/apps/volt/doc/button/TextDoc.vue
+++ b/apps/volt/doc/button/TextDoc.vue
@@ -4,37 +4,35 @@
     </DocSectionText>
     <div class="card flex justify-center flex-wrap gap-4">
         <Button label="Primary" variant="text" />
-        <Button label="Secondary" severity="secondary" variant="text" />
-        <Button label="Success" severity="success" variant="text" />
-        <Button label="Info" severity="info" variant="text" />
-        <Button label="Warn" severity="warn" variant="text" />
-        <Button label="Help" severity="help" variant="text" />
-        <Button label="Danger" severity="danger" variant="text" />
-        <Button label="Contrast" severity="contrast" variant="text" />
+        <SecondaryButton label="Secondary" variant="text" />
+        <ContrastButton label="Contrast" variant="text" />
+        <DangerButton label="Danger" variant="text" />
     </div>
     <DocSectionCode :code="code" />
 </template>
 
 <script setup>
 import Button from '@/volt/button';
+import ContrastButton from '@/volt/button/contrast';
+import DangerButton from '@/volt/button/danger';
+import SecondaryButton from '@/volt/button/secondary';
 import { ref } from 'vue';
 
 const code = ref(`
 <template>
     <div class="card flex justify-center flex-wrap gap-4">
         <Button label="Primary" variant="text" />
-        <Button label="Secondary" severity="secondary" variant="text" />
-        <Button label="Success" severity="success" variant="text" />
-        <Button label="Info" severity="info" variant="text" />
-        <Button label="Warn" severity="warn" variant="text" />
-        <Button label="Help" severity="help" variant="text" />
-        <Button label="Danger" severity="danger" variant="text" />
-        <Button label="Contrast" severity="contrast" variant="text" />
+        <SecondaryButton label="Secondary" variant="text" />
+        <ContrastButton label="Contrast" variant="text" />
+        <DangerButton label="Danger" variant="text" />
     </div>
 </template>
 
 <script setup>
 import Button from '@/volt/button';
+import ContrastButton from '@/volt/button/contrast';
+import DangerButton from '@/volt/button/danger';
+import SecondaryButton from '@/volt/button/secondary';
 <\/script>
 `);
 </script>
diff --git a/apps/volt/pages/button/index.vue b/apps/volt/pages/button/index.vue
index 9c8b6b00f..2ed2a05ec 100644
--- a/apps/volt/pages/button/index.vue
+++ b/apps/volt/pages/button/index.vue
@@ -11,7 +11,6 @@ import HeadlessDoc from '@/doc/button/HeadlessDoc.vue';
 import IconOnlyDoc from '@/doc/button/IconOnlyDoc.vue';
 import IconsDoc from '@/doc/button/IconsDoc.vue';
 import ImportDoc from '@/doc/button/ImportDoc.vue';
-import LinkDoc from '@/doc/button/LinkDoc.vue';
 import LoadingDoc from '@/doc/button/LoadingDoc.vue';
 import OutlinedDoc from '@/doc/button/OutlinedDoc.vue';
 import RaisedDoc from '@/doc/button/RaisedDoc.vue';
@@ -45,11 +44,6 @@ const docs = ref([
         label: 'Loading',
         component: LoadingDoc
     },
-    {
-        id: 'link',
-        label: 'Link',
-        component: LinkDoc
-    },
     {
         id: 'severity',
         label: 'Severity',
diff --git a/apps/volt/volt/button/contrast.vue b/apps/volt/volt/button/contrast.vue
new file mode 100644
index 000000000..4f6c285dd
--- /dev/null
+++ b/apps/volt/volt/button/contrast.vue
@@ -0,0 +1,58 @@
+<template>
+    <Button
+        unstyled
+        :pt="theme"
+        :ptOptions="{
+            mergeProps: ptViewMerge
+        }"
+    >
+        <template v-for="(_, slotName) in $slots" v-slot:[slotName]="slotProps">
+            <slot :name="slotName" v-bind="slotProps ?? {}" />
+        </template>
+    </Button>
+</template>
+
+<script setup>
+import Button from 'primevue/button';
+import { ref } from 'vue';
+import { ptViewMerge } from '../utils';
+
+const theme = ref({
+    root: `inline-flex cursor-pointer select-none items-center justify-center overflow-hidden relative
+        px-3 py-2 gap-2 rounded-md disabled:pointer-events-none disabled:opacity-60 transition-colors duration-200
+        bg-surface-950 enabled:hover:bg-surface-900 enabled:active:bg-surface-800
+        border-surface-950 enabled:hover:border-surface-900 enabled:active:border-surface-800
+        text-white enabled:hover:text-white enabled:active:text-white
+        dark:bg-surface-0 dark:enabled:hover:bg-surface-100 dark:enabled:active:bg-surface-200
+        dark:border-surface-100 dark:enabled:hover:border-surface-200 dark:enabled:active:border-surface-300
+        dark:text-surface-950 dark:enabled:hover:text-surface-950 dark:enabled:active:text-surface-950
+        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2
+        focus-visible:outline-surface-950 dark:focus-visible:outline-surface-0
+        p-vertical:flex-col p-fluid:w-full p-fluid:p-icon-only:w-10
+        p-icon-only:w-10 p-icon-only:px-0 p-icon-only:gap-0
+        p-icon-only:p-rounded:rounded-full p-icon-only:p-rounded:h-10
+        p-small:text-sm p-small:px-[0.625rem] p-small:py-[0.375rem]
+        p-large:text-[1.125rem] p-large:px-[0.875rem] p-large:py-[0.625rem]
+        p-raised:shadow-sm p-rounded:rounded-[2rem]
+        p-outlined:bg-transparent enabled:hover:p-outlined:bg-surface-50 enabled:active:p-outlined:bg-surface-100
+        p-outlined:border-surface-700 enabled:hover:p-outlined:border-surface-700 enabled:active:p-outlined:border-surface-700
+        p-outlined:text-surface-950 enabled:hover:p-outlined:text-surface-950 enabled:active:p-outlined:text-surface-950
+        dark:p-outlined:bg-transparent dark:enabled:hover:p-outlined:bg-surface-800 dark:enabled:active:p-outlined:bg-surface-700
+        dark:p-outlined:border-surface-500 dark:enabled:hover:p-outlined:border-surface-500 dark:enabled:active:p-outlined:border-surface-500
+        dark:p-outlined:text-surface-0 dark:enabled:hover:p-outlined:text-surface-0 dark:enabled:active:p-outlined:text-surface-0
+        p-text:bg-transparent enabled:hover:p-text:bg-surface-50 enabled:active:p-text:bg-surface-100
+        p-text:border-transparent enabled:hover:p-text:border-transparent enabled:active:p-text:border-transparent
+        p-text:text-surface-950 enabled:hover:p-text:text-surface-950 enabled:active:p-text:text-surface-950
+        dark:p-text:bg-transparent dark:enabled:hover:p-text:bg-surface-800 dark:enabled:active:p-text:bg-surface-700
+        dark:p-text:border-transparent dark:enabled:hover:p-text:border-transparent dark:enabled:active:p-text:border-transparent
+        dark:p-text:text-surface-0 dark:enabled:hover:p-text:text-surface-0 dark:enabled:active:p-text:text-surface-0
+    `,
+    loadingIcon: ``,
+    icon: `p-right:order-1 p-bottom:order-2`,
+    label: `font-medium p-icon-only:invisible p-icon-only:w-0
+        p-small:text-sm p-large:text-[1.125rem]`,
+    pcBadge: {
+        root: `min-w-4 h-4 leading-4`
+    }
+});
+</script>
diff --git a/apps/volt/volt/button/danger.vue b/apps/volt/volt/button/danger.vue
new file mode 100644
index 000000000..d202e16ae
--- /dev/null
+++ b/apps/volt/volt/button/danger.vue
@@ -0,0 +1,58 @@
+<template>
+    <Button
+        unstyled
+        :pt="theme"
+        :ptOptions="{
+            mergeProps: ptViewMerge
+        }"
+    >
+        <template v-for="(_, slotName) in $slots" v-slot:[slotName]="slotProps">
+            <slot :name="slotName" v-bind="slotProps ?? {}" />
+        </template>
+    </Button>
+</template>
+
+<script setup>
+import Button from 'primevue/button';
+import { ref } from 'vue';
+import { ptViewMerge } from '../utils';
+
+const theme = ref({
+    root: `inline-flex cursor-pointer select-none items-center justify-center overflow-hidden relative
+        px-3 py-2 gap-2 rounded-md disabled:pointer-events-none disabled:opacity-60 transition-colors duration-200
+        bg-red-500 enabled:hover:bg-red-600 enabled:active:bg-red-700
+        border-red-500 enabled:hover:border-red-600 enabled:active:border-red-700
+        text-white enabled:hover:text-white enabled:active:text-white
+        dark:bg-red-400 dark:enabled:hover:bg-red-300 dark:enabled:active:bg-red-200
+        dark:border-red-400 dark:enabled:hover:border-red-300 dark:enabled:active:border-red-200
+        dark:text-red-950 dark:enabled:hover:text-red-950 dark:enabled:active:text-red-950
+        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2
+        focus-visible:outline-red-500 dark:focus-visible:outline-red-400
+        p-vertical:flex-col p-fluid:w-full p-fluid:p-icon-only:w-10
+        p-icon-only:w-10 p-icon-only:px-0 p-icon-only:gap-0
+        p-icon-only:p-rounded:rounded-full p-icon-only:p-rounded:h-10
+        p-small:text-sm p-small:px-[0.625rem] p-small:py-[0.375rem]
+        p-large:text-[1.125rem] p-large:px-[0.875rem] p-large:py-[0.625rem]
+        p-raised:shadow-sm p-rounded:rounded-[2rem]
+        p-outlined:bg-transparent enabled:hover:p-outlined:bg-red-50 enabled:active:p-outlined:bg-red-100
+        p-outlined:border-red-200 enabled:hover:p-outlined:border-red-200 enabled:active:p-outlined:border-red-200
+        p-outlined:text-red-500 enabled:hover:p-outlined:text-red-500 enabled:active:p-outlined:text-red-500
+        dark:p-outlined:bg-transparent dark:enabled:hover:p-outlined:bg-red-400/5 dark:enabled:active:p-outlined:bg-red-400/15
+        dark:p-outlined:border-red-700 dark:enabled:hover:p-outlined:border-red-700 dark:enabled:active:p-outlined:border-red-700
+        dark:p-outlined:text-red-400 dark:enabled:hover:p-outlined:text-red-400 dark:enabled:active:p-outlined:text-red-400
+        p-text:bg-transparent enabled:hover:p-text:bg-red-50 enabled:active:p-text:bg-red-100
+        p-text:border-transparent enabled:hover:p-text:border-transparent enabled:active:p-text:border-transparent
+        p-text:text-red-500 enabled:hover:p-text:text-red-500 enabled:active:p-text:text-red-500
+        dark:p-text:bg-transparent dark:enabled:hover:p-text:bg-red-400/5 dark:enabled:active:p-text:bg-red-400/15
+        dark:p-text:border-transparent dark:enabled:hover:p-text:border-transparent dark:enabled:active:p-text:border-transparent
+        dark:p-text:text-red-400 dark:enabled:hover:p-text:text-red-400 dark:enabled:active:p-text:text-red-400
+    `,
+    loadingIcon: ``,
+    icon: `p-right:order-1 p-bottom:order-2`,
+    label: `font-medium p-icon-only:invisible p-icon-only:w-0
+        p-small:text-sm p-large:text-[1.125rem]`,
+    pcBadge: {
+        root: `min-w-4 h-4 leading-4`
+    }
+});
+</script>
diff --git a/apps/volt/volt/button/index.vue b/apps/volt/volt/button/index.vue
index 014890d14..b6ef800a7 100644
--- a/apps/volt/volt/button/index.vue
+++ b/apps/volt/volt/button/index.vue
@@ -19,7 +19,7 @@ import { ptViewMerge } from '../utils';
 
 const theme = ref({
     root: `inline-flex cursor-pointer select-none items-center justify-center overflow-hidden relative
-        px-3 py-2 gap-2 rounded-md disabled:pointer-events-none transition-colors duration-200
+        px-3 py-2 gap-2 rounded-md disabled:pointer-events-none disabled:opacity-60 transition-colors duration-200
         bg-primary enabled:hover:bg-primary-emphasis enabled:active:bg-primary-emphasis-alt text-primary-contrast
         border border-primary enabled:hover:border-primary-emphasis enabled:active:border-primary-emphasis-alt
         focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary
@@ -29,6 +29,18 @@ const theme = ref({
         p-small:text-sm p-small:px-[0.625rem] p-small:py-[0.375rem]
         p-large:text-[1.125rem] p-large:px-[0.875rem] p-large:py-[0.625rem]
         p-raised:shadow-sm p-rounded:rounded-[2rem]
+        p-outlined:bg-transparent enabled:hover:p-outlined:bg-primary-50 enabled:active:p-outlined:bg-primary-100
+        p-outlined:border-primary-200 enabled:hover:p-outlined:border-primary-200 enabled:active:p-outlined:border-primary-200
+        p-outlined:text-primary enabled:hover:p-outlined:text-primary enabled:active:p-outlined:text-primary
+        dark:p-outlined:bg-transparent dark:enabled:hover:p-outlined:bg-primary/5 dark:enabled:active:p-outlined:bg-primary/15
+        dark:p-outlined:border-primary-700 dark:enabled:hover:p-outlined:border-primary-700 dark:enabled:active:p-outlined:border-primary-700
+        dark:p-outlined:text-primary dark:enabled:hover:p-outlined:text-primary dark:enabled:active:p-outlined:text-primary
+        p-text:bg-transparent enabled:hover:p-text:bg-primary-50 enabled:active:p-text:bg-primary-100
+        p-text:border-transparent enabled:hover:p-text:border-transparent enabled:active:p-text:border-transparent
+        p-text:text-primary enabled:hover:p-text:text-primary enabled:active:p-text:text-primary
+        dark:p-text:bg-transparent dark:enabled:hover:p-text:bg-primary/5 dark:enabled:active:p-text:bg-primary/15
+        dark:p-text:border-transparent dark:enabled:hover:p-text:border-transparent dark:enabled:active:p-text:border-transparent
+        dark:p-text:text-primary dark:enabled:hover:p-text:text-primary dark:enabled:active:p-text:text-primary
     `,
     loadingIcon: ``,
     icon: `p-right:order-1 p-bottom:order-2`,
diff --git a/apps/volt/volt/button/secondary.vue b/apps/volt/volt/button/secondary.vue
new file mode 100644
index 000000000..8daa9c68a
--- /dev/null
+++ b/apps/volt/volt/button/secondary.vue
@@ -0,0 +1,58 @@
+<template>
+    <Button
+        unstyled
+        :pt="theme"
+        :ptOptions="{
+            mergeProps: ptViewMerge
+        }"
+    >
+        <template v-for="(_, slotName) in $slots" v-slot:[slotName]="slotProps">
+            <slot :name="slotName" v-bind="slotProps ?? {}" />
+        </template>
+    </Button>
+</template>
+
+<script setup>
+import Button from 'primevue/button';
+import { ref } from 'vue';
+import { ptViewMerge } from '../utils';
+
+const theme = ref({
+    root: `inline-flex cursor-pointer select-none items-center justify-center overflow-hidden relative
+        px-3 py-2 gap-2 rounded-md disabled:pointer-events-none disabled:opacity-60 transition-colors duration-200
+        bg-surface-100 enabled:hover:bg-surface-200 enabled:active:bg-surface-300
+        border-surface-100 enabled:hover:border-surface-200 enabled:active:border-surface-300
+        text-surface-600 enabled:hover:text-surface-700 enabled:active:text-surface-800
+        dark:bg-surface-800 dark:enabled:hover:bg-surface-700 dark:enabled:active:bg-surface-600
+        dark:border-surface-800 dark:enabled:hover:border-surface-700 dark:enabled:active:border-surface-600
+        dark:text-surface-300 dark:enabled:hover:text-surface-200 dark:enabled:active:text-surface-100
+        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2
+        focus-visible:outline-surface-600 dark:focus-visible:outline-surface-300
+        p-vertical:flex-col p-fluid:w-full p-fluid:p-icon-only:w-10
+        p-icon-only:w-10 p-icon-only:px-0 p-icon-only:gap-0
+        p-icon-only:p-rounded:rounded-full p-icon-only:p-rounded:h-10
+        p-small:text-sm p-small:px-[0.625rem] p-small:py-[0.375rem]
+        p-large:text-[1.125rem] p-large:px-[0.875rem] p-large:py-[0.625rem]
+        p-raised:shadow-sm p-rounded:rounded-[2rem]
+        p-outlined:bg-transparent enabled:hover:p-outlined:bg-surface-50 enabled:active:p-outlined:bg-surface-100
+        p-outlined:border-surface-200 enabled:hover:p-outlined:border-surface-200 enabled:active:p-outlined:border-surface-200
+        p-outlined:text-surface-500 enabled:hover:p-outlined:text-surface-500 enabled:active:p-outlined:text-surface-500
+        dark:p-outlined:bg-transparent dark:enabled:hover:p-outlined:bg-white/5 dark:enabled:active:p-outlined:bg-white/15
+        dark:p-outlined:border-surface-700 dark:enabled:hover:p-outlined:border-surface-700 dark:enabled:active:p-outlined:border-surface-700
+        dark:p-outlined:text-surface-400 dark:enabled:hover:p-outlined:text-surface-400 dark:enabled:active:p-outlined:text-surface-400
+        p-text:bg-transparent enabled:hover:p-text:bg-surface-50 enabled:active:p-text:bg-surface-100
+        p-text:border-transparent enabled:hover:p-text:border-transparent enabled:active:p-text:border-transparent
+        p-text:text-surface-500 enabled:hover:p-text:text-surface-500 enabled:active:p-text:text-surface-500
+        dark:p-text:bg-transparent dark:enabled:hover:p-text:bg-surface-800 dark:enabled:active:p-text:bg-surface-700
+        dark:p-text:border-transparent dark:enabled:hover:p-text:border-transparent dark:enabled:active:p-text:border-transparent
+        dark:p-text:text-surface-400 dark:enabled:hover:p-text:text-surface-400 dark:enabled:active:p-text:text-surface-400
+    `,
+    loadingIcon: ``,
+    icon: `p-right:order-1 p-bottom:order-2`,
+    label: `font-medium p-icon-only:invisible p-icon-only:w-0
+        p-small:text-sm p-large:text-[1.125rem]`,
+    pcBadge: {
+        root: `min-w-4 h-4 leading-4`
+    }
+});
+</script>