From 0862792cf5b4d49c5bd9a2d44c628aa07bf9f8d3 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Tue, 4 Mar 2025 13:12:57 +0300
Subject: [PATCH] Initiate button base

---
 apps/volt/assets/data/menu.json           |   4 +
 apps/volt/components/doc/DocComponent.vue |   8 +-
 apps/volt/doc/avatar/AvatarGroupDoc.vue   |   1 +
 apps/volt/doc/avatar/IconDoc.vue          |   1 +
 apps/volt/doc/avatar/ImageDoc.vue         |   1 +
 apps/volt/doc/avatar/LabelDoc.vue         |   1 +
 apps/volt/doc/button/BadgeDoc.vue         |  26 +++++
 apps/volt/doc/button/BasicDoc.vue         |  26 +++++
 apps/volt/doc/button/ButtonGroupDoc.vue   |  26 +++++
 apps/volt/doc/button/DisabledDoc.vue      |  26 +++++
 apps/volt/doc/button/HeadlessDoc.vue      |  26 +++++
 apps/volt/doc/button/IconOnlyDoc.vue      |  26 +++++
 apps/volt/doc/button/IconsDoc.vue         |  26 +++++
 apps/volt/doc/button/ImportDoc.vue        |  26 +++++
 apps/volt/doc/button/LinkDoc.vue          |  26 +++++
 apps/volt/doc/button/LoadingDoc.vue       |  26 +++++
 apps/volt/doc/button/OutlinedDoc.vue      |  26 +++++
 apps/volt/doc/button/RaisedDoc.vue        |  26 +++++
 apps/volt/doc/button/RaisedTextDoc.vue    |  26 +++++
 apps/volt/doc/button/RoundedDoc.vue       |  26 +++++
 apps/volt/doc/button/SeverityDoc.vue      |  26 +++++
 apps/volt/doc/button/SizesDoc.vue         |  26 +++++
 apps/volt/doc/button/TemplateDoc.vue      |  26 +++++
 apps/volt/doc/button/TextDoc.vue          |  26 +++++
 apps/volt/doc/card/AdvancedDoc.vue        |   1 +
 apps/volt/doc/card/BasicDoc.vue           |   1 +
 apps/volt/doc/textarea/DisabledDoc.vue    |   2 +-
 apps/volt/doc/textarea/HelpTextDoc.vue    |  31 ------
 apps/volt/pages/button/index.vue          | 121 ++++++++++++++++++++++
 29 files changed, 604 insertions(+), 36 deletions(-)
 create mode 100644 apps/volt/doc/button/BadgeDoc.vue
 create mode 100644 apps/volt/doc/button/BasicDoc.vue
 create mode 100644 apps/volt/doc/button/ButtonGroupDoc.vue
 create mode 100644 apps/volt/doc/button/DisabledDoc.vue
 create mode 100644 apps/volt/doc/button/HeadlessDoc.vue
 create mode 100644 apps/volt/doc/button/IconOnlyDoc.vue
 create mode 100644 apps/volt/doc/button/IconsDoc.vue
 create mode 100644 apps/volt/doc/button/ImportDoc.vue
 create mode 100644 apps/volt/doc/button/LinkDoc.vue
 create mode 100644 apps/volt/doc/button/LoadingDoc.vue
 create mode 100644 apps/volt/doc/button/OutlinedDoc.vue
 create mode 100644 apps/volt/doc/button/RaisedDoc.vue
 create mode 100644 apps/volt/doc/button/RaisedTextDoc.vue
 create mode 100644 apps/volt/doc/button/RoundedDoc.vue
 create mode 100644 apps/volt/doc/button/SeverityDoc.vue
 create mode 100644 apps/volt/doc/button/SizesDoc.vue
 create mode 100644 apps/volt/doc/button/TemplateDoc.vue
 create mode 100644 apps/volt/doc/button/TextDoc.vue
 delete mode 100644 apps/volt/doc/textarea/HelpTextDoc.vue
 create mode 100644 apps/volt/pages/button/index.vue

diff --git a/apps/volt/assets/data/menu.json b/apps/volt/assets/data/menu.json
index 10a8c142e..c5dc35a8c 100644
--- a/apps/volt/assets/data/menu.json
+++ b/apps/volt/assets/data/menu.json
@@ -26,6 +26,10 @@
                     "name": "Avatar",
                     "to": "/avatar"
                 },
+                {
+                    "name": "Button",
+                    "to": "/button"
+                },
                 {
                     "name": "Card",
                     "to": "/card"
diff --git a/apps/volt/components/doc/DocComponent.vue b/apps/volt/components/doc/DocComponent.vue
index b0d8585eb..d3e77197c 100644
--- a/apps/volt/components/doc/DocComponent.vue
+++ b/apps/volt/components/doc/DocComponent.vue
@@ -28,21 +28,21 @@
                                 target="_blank"
                                 rel="noopener noreferrer"
                                 class="inline-flex rounded-full px-3 py-1 bg-surface-200 hover:bg-surface-300 transition-all duration-200 gap-2 items-center text-sm dark:bg-surface-800 dark:hover:bg-surface-700"
-                                ><span class="text-surface-900 dark:text-surface-50 font-medium">API Doc</span><i class="pi pi-external-link text-xs text-surface-900 dark:text-surface-50"></i
+                                ><span class="text-surface-900 dark:text-surface-50 font-medium">API Doc</span><i class="pi pi-external-link text-xs! text-surface-900 dark:text-surface-50"></i
                             ></a>
                             <a
                                 :href="`https://primevue.org${originPath}/#pt`"
                                 target="_blank"
                                 rel="noopener noreferrer"
                                 class="inline-flex rounded-full px-3 py-1 bg-surface-200 hover:bg-surface-300 transition-all duration-200 gap-2 items-center text-sm text-surface-900 dark:bg-surface-800 dark:hover:bg-surface-700"
-                                ><span class="text-surface-900 dark:text-surface-50 font-medium">PassThrough Doc</span><i class="pi pi-external-link text-xs text-surface-900 dark:text-surface-50"></i
+                                ><span class="text-surface-900 dark:text-surface-50 font-medium">PassThrough Doc</span><i class="pi pi-external-link text-xs! text-surface-900 dark:text-surface-50"></i
                             ></a>
                             <a
                                 :href="`https://primevue.org${originPath}/#accessibility`"
                                 target="_blank"
                                 rel="noopener noreferrer"
                                 class="inline-flex rounded-full px-3 py-1 bg-surface-200 hover:bg-surface-300 transition-all duration-200 gap-2 items-center text-sm text-surface-900 dark:bg-surface-800 dark:hover:bg-surface-700"
-                                ><span class="text-surface-900 dark:text-surface-50 font-medium">Accessibility</span><i class="pi pi-external-link text-xs text-surface-900 dark:text-surface-50"></i
+                                ><span class="text-surface-900 dark:text-surface-50 font-medium">Accessibility</span><i class="pi pi-external-link text-xs! text-surface-900 dark:text-surface-50"></i
                             ></a>
                         </div>
                     </div>
@@ -59,7 +59,7 @@
 </template>
 
 <script setup>
-import { computed, defineProps, ref } from 'vue';
+import { computed, ref } from 'vue';
 
 defineProps({
     title: String,
diff --git a/apps/volt/doc/avatar/AvatarGroupDoc.vue b/apps/volt/doc/avatar/AvatarGroupDoc.vue
index 10e62f828..6afa848b0 100644
--- a/apps/volt/doc/avatar/AvatarGroupDoc.vue
+++ b/apps/volt/doc/avatar/AvatarGroupDoc.vue
@@ -18,6 +18,7 @@
 <script setup>
 import Avatar from '@/volt/avatar';
 import AvatarGroup from '@/volt/avatargroup';
+import { ref } from 'vue';
 
 const code = ref(`
 <template>
diff --git a/apps/volt/doc/avatar/IconDoc.vue b/apps/volt/doc/avatar/IconDoc.vue
index 254b5df45..9e3b95732 100644
--- a/apps/volt/doc/avatar/IconDoc.vue
+++ b/apps/volt/doc/avatar/IconDoc.vue
@@ -31,6 +31,7 @@
 
 <script setup>
 import Avatar from '@/volt/avatar';
+import { ref } from 'vue';
 
 const code = ref(`
 <template>
diff --git a/apps/volt/doc/avatar/ImageDoc.vue b/apps/volt/doc/avatar/ImageDoc.vue
index af47532db..5ccd6b512 100644
--- a/apps/volt/doc/avatar/ImageDoc.vue
+++ b/apps/volt/doc/avatar/ImageDoc.vue
@@ -29,6 +29,7 @@
 
 <script setup>
 import Avatar from '@/volt/avatar';
+import { ref } from 'vue';
 
 const code = ref(`
 <template>
diff --git a/apps/volt/doc/avatar/LabelDoc.vue b/apps/volt/doc/avatar/LabelDoc.vue
index 62f86e09a..57526b9e0 100644
--- a/apps/volt/doc/avatar/LabelDoc.vue
+++ b/apps/volt/doc/avatar/LabelDoc.vue
@@ -31,6 +31,7 @@
 
 <script setup>
 import Avatar from '@/volt/avatar';
+import { ref } from 'vue';
 
 const code = ref(`
 <template>
diff --git a/apps/volt/doc/button/BadgeDoc.vue b/apps/volt/doc/button/BadgeDoc.vue
new file mode 100644
index 000000000..4a7ea0d70
--- /dev/null
+++ b/apps/volt/doc/button/BadgeDoc.vue
@@ -0,0 +1,26 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Text to display on a button is defined with the <i>label</i> property.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Button label="Submit" />
+    </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">
+        <Button label="Submit" />
+    </div>
+</template>
+
+<script setup>
+import Button from '@/volt/button';
+<\/script>
+`);
+</script>
diff --git a/apps/volt/doc/button/BasicDoc.vue b/apps/volt/doc/button/BasicDoc.vue
new file mode 100644
index 000000000..4a7ea0d70
--- /dev/null
+++ b/apps/volt/doc/button/BasicDoc.vue
@@ -0,0 +1,26 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Text to display on a button is defined with the <i>label</i> property.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Button label="Submit" />
+    </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">
+        <Button label="Submit" />
+    </div>
+</template>
+
+<script setup>
+import Button from '@/volt/button';
+<\/script>
+`);
+</script>
diff --git a/apps/volt/doc/button/ButtonGroupDoc.vue b/apps/volt/doc/button/ButtonGroupDoc.vue
new file mode 100644
index 000000000..4a7ea0d70
--- /dev/null
+++ b/apps/volt/doc/button/ButtonGroupDoc.vue
@@ -0,0 +1,26 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Text to display on a button is defined with the <i>label</i> property.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Button label="Submit" />
+    </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">
+        <Button label="Submit" />
+    </div>
+</template>
+
+<script setup>
+import Button from '@/volt/button';
+<\/script>
+`);
+</script>
diff --git a/apps/volt/doc/button/DisabledDoc.vue b/apps/volt/doc/button/DisabledDoc.vue
new file mode 100644
index 000000000..4a7ea0d70
--- /dev/null
+++ b/apps/volt/doc/button/DisabledDoc.vue
@@ -0,0 +1,26 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Text to display on a button is defined with the <i>label</i> property.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Button label="Submit" />
+    </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">
+        <Button label="Submit" />
+    </div>
+</template>
+
+<script setup>
+import Button from '@/volt/button';
+<\/script>
+`);
+</script>
diff --git a/apps/volt/doc/button/HeadlessDoc.vue b/apps/volt/doc/button/HeadlessDoc.vue
new file mode 100644
index 000000000..4a7ea0d70
--- /dev/null
+++ b/apps/volt/doc/button/HeadlessDoc.vue
@@ -0,0 +1,26 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Text to display on a button is defined with the <i>label</i> property.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Button label="Submit" />
+    </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">
+        <Button label="Submit" />
+    </div>
+</template>
+
+<script setup>
+import Button from '@/volt/button';
+<\/script>
+`);
+</script>
diff --git a/apps/volt/doc/button/IconOnlyDoc.vue b/apps/volt/doc/button/IconOnlyDoc.vue
new file mode 100644
index 000000000..4a7ea0d70
--- /dev/null
+++ b/apps/volt/doc/button/IconOnlyDoc.vue
@@ -0,0 +1,26 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Text to display on a button is defined with the <i>label</i> property.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Button label="Submit" />
+    </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">
+        <Button label="Submit" />
+    </div>
+</template>
+
+<script setup>
+import Button from '@/volt/button';
+<\/script>
+`);
+</script>
diff --git a/apps/volt/doc/button/IconsDoc.vue b/apps/volt/doc/button/IconsDoc.vue
new file mode 100644
index 000000000..4a7ea0d70
--- /dev/null
+++ b/apps/volt/doc/button/IconsDoc.vue
@@ -0,0 +1,26 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Text to display on a button is defined with the <i>label</i> property.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Button label="Submit" />
+    </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">
+        <Button label="Submit" />
+    </div>
+</template>
+
+<script setup>
+import Button from '@/volt/button';
+<\/script>
+`);
+</script>
diff --git a/apps/volt/doc/button/ImportDoc.vue b/apps/volt/doc/button/ImportDoc.vue
new file mode 100644
index 000000000..4a7ea0d70
--- /dev/null
+++ b/apps/volt/doc/button/ImportDoc.vue
@@ -0,0 +1,26 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Text to display on a button is defined with the <i>label</i> property.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Button label="Submit" />
+    </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">
+        <Button label="Submit" />
+    </div>
+</template>
+
+<script setup>
+import Button from '@/volt/button';
+<\/script>
+`);
+</script>
diff --git a/apps/volt/doc/button/LinkDoc.vue b/apps/volt/doc/button/LinkDoc.vue
new file mode 100644
index 000000000..4a7ea0d70
--- /dev/null
+++ b/apps/volt/doc/button/LinkDoc.vue
@@ -0,0 +1,26 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Text to display on a button is defined with the <i>label</i> property.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Button label="Submit" />
+    </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">
+        <Button label="Submit" />
+    </div>
+</template>
+
+<script setup>
+import Button from '@/volt/button';
+<\/script>
+`);
+</script>
diff --git a/apps/volt/doc/button/LoadingDoc.vue b/apps/volt/doc/button/LoadingDoc.vue
new file mode 100644
index 000000000..4a7ea0d70
--- /dev/null
+++ b/apps/volt/doc/button/LoadingDoc.vue
@@ -0,0 +1,26 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Text to display on a button is defined with the <i>label</i> property.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Button label="Submit" />
+    </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">
+        <Button label="Submit" />
+    </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
new file mode 100644
index 000000000..4a7ea0d70
--- /dev/null
+++ b/apps/volt/doc/button/OutlinedDoc.vue
@@ -0,0 +1,26 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Text to display on a button is defined with the <i>label</i> property.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Button label="Submit" />
+    </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">
+        <Button label="Submit" />
+    </div>
+</template>
+
+<script setup>
+import Button from '@/volt/button';
+<\/script>
+`);
+</script>
diff --git a/apps/volt/doc/button/RaisedDoc.vue b/apps/volt/doc/button/RaisedDoc.vue
new file mode 100644
index 000000000..4a7ea0d70
--- /dev/null
+++ b/apps/volt/doc/button/RaisedDoc.vue
@@ -0,0 +1,26 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Text to display on a button is defined with the <i>label</i> property.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Button label="Submit" />
+    </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">
+        <Button label="Submit" />
+    </div>
+</template>
+
+<script setup>
+import Button from '@/volt/button';
+<\/script>
+`);
+</script>
diff --git a/apps/volt/doc/button/RaisedTextDoc.vue b/apps/volt/doc/button/RaisedTextDoc.vue
new file mode 100644
index 000000000..4a7ea0d70
--- /dev/null
+++ b/apps/volt/doc/button/RaisedTextDoc.vue
@@ -0,0 +1,26 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Text to display on a button is defined with the <i>label</i> property.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Button label="Submit" />
+    </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">
+        <Button label="Submit" />
+    </div>
+</template>
+
+<script setup>
+import Button from '@/volt/button';
+<\/script>
+`);
+</script>
diff --git a/apps/volt/doc/button/RoundedDoc.vue b/apps/volt/doc/button/RoundedDoc.vue
new file mode 100644
index 000000000..4a7ea0d70
--- /dev/null
+++ b/apps/volt/doc/button/RoundedDoc.vue
@@ -0,0 +1,26 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Text to display on a button is defined with the <i>label</i> property.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Button label="Submit" />
+    </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">
+        <Button label="Submit" />
+    </div>
+</template>
+
+<script setup>
+import Button from '@/volt/button';
+<\/script>
+`);
+</script>
diff --git a/apps/volt/doc/button/SeverityDoc.vue b/apps/volt/doc/button/SeverityDoc.vue
new file mode 100644
index 000000000..4a7ea0d70
--- /dev/null
+++ b/apps/volt/doc/button/SeverityDoc.vue
@@ -0,0 +1,26 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Text to display on a button is defined with the <i>label</i> property.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Button label="Submit" />
+    </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">
+        <Button label="Submit" />
+    </div>
+</template>
+
+<script setup>
+import Button from '@/volt/button';
+<\/script>
+`);
+</script>
diff --git a/apps/volt/doc/button/SizesDoc.vue b/apps/volt/doc/button/SizesDoc.vue
new file mode 100644
index 000000000..4a7ea0d70
--- /dev/null
+++ b/apps/volt/doc/button/SizesDoc.vue
@@ -0,0 +1,26 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Text to display on a button is defined with the <i>label</i> property.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Button label="Submit" />
+    </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">
+        <Button label="Submit" />
+    </div>
+</template>
+
+<script setup>
+import Button from '@/volt/button';
+<\/script>
+`);
+</script>
diff --git a/apps/volt/doc/button/TemplateDoc.vue b/apps/volt/doc/button/TemplateDoc.vue
new file mode 100644
index 000000000..4a7ea0d70
--- /dev/null
+++ b/apps/volt/doc/button/TemplateDoc.vue
@@ -0,0 +1,26 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Text to display on a button is defined with the <i>label</i> property.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Button label="Submit" />
+    </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">
+        <Button label="Submit" />
+    </div>
+</template>
+
+<script setup>
+import Button from '@/volt/button';
+<\/script>
+`);
+</script>
diff --git a/apps/volt/doc/button/TextDoc.vue b/apps/volt/doc/button/TextDoc.vue
new file mode 100644
index 000000000..4a7ea0d70
--- /dev/null
+++ b/apps/volt/doc/button/TextDoc.vue
@@ -0,0 +1,26 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Text to display on a button is defined with the <i>label</i> property.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Button label="Submit" />
+    </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">
+        <Button label="Submit" />
+    </div>
+</template>
+
+<script setup>
+import Button from '@/volt/button';
+<\/script>
+`);
+</script>
diff --git a/apps/volt/doc/card/AdvancedDoc.vue b/apps/volt/doc/card/AdvancedDoc.vue
index 67666c1b1..973fd7320 100644
--- a/apps/volt/doc/card/AdvancedDoc.vue
+++ b/apps/volt/doc/card/AdvancedDoc.vue
@@ -29,6 +29,7 @@
 <script setup>
 import Button from '@/volt/button';
 import Card from '@/volt/card';
+import { ref } from 'vue';
 
 const code = ref(`
 <template>
diff --git a/apps/volt/doc/card/BasicDoc.vue b/apps/volt/doc/card/BasicDoc.vue
index dc3942d5a..4eacbb798 100644
--- a/apps/volt/doc/card/BasicDoc.vue
+++ b/apps/volt/doc/card/BasicDoc.vue
@@ -18,6 +18,7 @@
 
 <script setup>
 import Card from '@/volt/card';
+import { ref } from 'vue';
 
 const code = ref(`
 <template>
diff --git a/apps/volt/doc/textarea/DisabledDoc.vue b/apps/volt/doc/textarea/DisabledDoc.vue
index f28974736..f93ad4d46 100644
--- a/apps/volt/doc/textarea/DisabledDoc.vue
+++ b/apps/volt/doc/textarea/DisabledDoc.vue
@@ -16,7 +16,7 @@ const value = ref(null);
 
 const code = ref(`
 <template>
-     <div class="card flex justify-center">
+    <div class="card flex justify-center">
         <Textarea v-model="value" rows="5" cols="30" disabled class="resize-none" />
     </div>
 </template>
diff --git a/apps/volt/doc/textarea/HelpTextDoc.vue b/apps/volt/doc/textarea/HelpTextDoc.vue
deleted file mode 100644
index 5e41700c5..000000000
--- a/apps/volt/doc/textarea/HelpTextDoc.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>An advisory text can be defined with the <NuxtLink to="/message">Message</NuxtLink> component.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <InputText v-model="value" type="text" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script setup>
-import InputText from '@/volt/inputtext';
-import { ref } from 'vue';
-
-const value = ref(null);
-
-const code = ref(`
-<template>
-    <div class="card flex justify-center">
-        <InputText v-model="value" type="text" />
-    </div>
-</template>
-
-<script setup>
-import InputText from '@/volt/inputtext';
-import { ref } from 'vue';
-
-const value = ref(null);
-<\/script>
-`);
-</script>
diff --git a/apps/volt/pages/button/index.vue b/apps/volt/pages/button/index.vue
new file mode 100644
index 000000000..fd8c9eee3
--- /dev/null
+++ b/apps/volt/pages/button/index.vue
@@ -0,0 +1,121 @@
+<template>
+    <DocComponent title="Vue Button Component" header="Button" description="Button is an extension to standard input element with icons and theming." :componentDocs="docs" />
+</template>
+
+<script setup>
+import BadgeDoc from '@/doc/button/BadgeDoc.vue';
+import BasicDoc from '@/doc/button/BasicDoc.vue';
+import ButtonGroupDoc from '@/doc/button/ButtonGroupDoc.vue';
+import DisabledDoc from '@/doc/button/DisabledDoc.vue';
+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';
+import RaisedTextDoc from '@/doc/button/RaisedTextDoc.vue';
+import RoundedDoc from '@/doc/button/RoundedDoc.vue';
+import SeverityDoc from '@/doc/button/SeverityDoc.vue';
+import SizesDoc from '@/doc/button/SizesDoc.vue';
+import TemplateDoc from '@/doc/button/TemplateDoc.vue';
+import TextDoc from '@/doc/button/TextDoc.vue';
+
+import { ref } from 'vue';
+
+const docs = ref([
+    [
+        {
+            id: 'import',
+            label: 'Import',
+            component: ImportDoc
+        },
+        {
+            id: 'basic',
+            label: 'Basic',
+            component: BasicDoc
+        },
+        {
+            id: 'icons',
+            label: 'Icons',
+            component: IconsDoc
+        },
+        {
+            id: 'loading',
+            label: 'Loading',
+            component: LoadingDoc
+        },
+        {
+            id: 'link',
+            label: 'Link',
+            component: LinkDoc
+        },
+        {
+            id: 'severity',
+            label: 'Severity',
+            component: SeverityDoc
+        },
+        {
+            id: 'disabled',
+            label: 'Disabled',
+            component: DisabledDoc
+        },
+        {
+            id: 'raised',
+            label: 'Raised',
+            component: RaisedDoc
+        },
+        {
+            id: 'rounded',
+            label: 'Rounded',
+            component: RoundedDoc
+        },
+        {
+            id: 'text',
+            label: 'Text',
+            component: TextDoc
+        },
+        {
+            id: 'raisedtext',
+            label: 'Raised Text',
+            component: RaisedTextDoc
+        },
+        {
+            id: 'outlined',
+            label: 'Outlined',
+            component: OutlinedDoc
+        },
+        {
+            id: 'icononly',
+            label: 'Icon Only',
+            component: IconOnlyDoc
+        },
+        {
+            id: 'badge',
+            label: 'Badge',
+            component: BadgeDoc
+        },
+        {
+            id: 'buttongroup',
+            label: 'Button Group',
+            component: ButtonGroupDoc
+        },
+        {
+            id: 'sizes',
+            label: 'Sizes',
+            component: SizesDoc
+        },
+        {
+            id: 'template',
+            label: 'Template',
+            component: TemplateDoc
+        },
+        {
+            id: 'headless',
+            label: 'Headless',
+            component: HeadlessDoc
+        }
+    ]
+]);
+</script>