Add base button and demos

apps/volt/assets/styles/tailwind.css

@@ -33,4 +33,9 @@
 @custom-variant p-removable (&[data-p~="removable"]);
 @custom-variant p-circle (&[data-p~="circle"]);
 @custom-variant p-determinate (&[data-p~="determinate"]);
-@custom-variant p-indeterminate (&[data-p~="indeterminate"]);
+@custom-variant p-indeterminate (&[data-p~="indeterminate"]);
+@custom-variant p-icon-only (&[data-p~="icon-only"]);
+@custom-variant p-rounded (&[data-p~="rounded"]);
+@custom-variant p-raised (&[data-p~="raised"]);
+@custom-variant p-outlined (&[data-p~="outlined"]);
+@custom-variant p-text (&[data-p~="text"]);

apps/volt/doc/button/BadgeDoc.vue

@@ -1,9 +1,10 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Text to display on a button is defined with the <i>label</i> property.</p>
+        <p>Buttons have built-in badge support with <i>badge</i> and <i>badgeSeverity</i> properties.</p>
     </DocSectionText>
-    <div class="card flex justify-center">
-        <Button label="Submit" />
+    <div class="card flex justify-center flex-wrap gap-4">
+        <Button type="button" label="Emails" badge="2" />
+        <Button type="button" label="Messages" icon="pi pi-users" badge="2" badgeSeverity="contrast" variant="outlined" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -14,8 +15,9 @@ import { ref } from 'vue';
 
 const code = ref(`
 <template>
-    <div class="card flex justify-center">
-        <Button label="Submit" />
+    <div class="card flex justify-center flex-wrap gap-4">
+        <Button type="button" label="Emails" badge="2" />
+        <Button type="button" label="Messages" icon="pi pi-users" badge="2" badgeSeverity="contrast" variant="outlined" />
     </div>
 </template>
 

apps/volt/doc/button/ButtonGroupDoc.vue

@@ -1,26 +1,36 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Text to display on a button is defined with the <i>label</i> property.</p>
+        <p>Multiple buttons are grouped when wrapped inside an element with <i>ButtonGroup</i> component.</p>
     </DocSectionText>
     <div class="card flex justify-center">
-        <Button label="Submit" />
+        <ButtonGroup>
+            <Button label="Save" icon="pi pi-check" />
+            <Button label="Delete" icon="pi pi-trash" />
+            <Button label="Cancel" icon="pi pi-times" />
+        </ButtonGroup>
     </div>
     <DocSectionCode :code="code" />
 </template>
 
 <script setup>
 import Button from '@/volt/button';
+import ButtonGroup from '@/volt/buttongroup';
 import { ref } from 'vue';
 
 const code = ref(`
 <template>
     <div class="card flex justify-center">
-        <Button label="Submit" />
+        <ButtonGroup>
+            <Button label="Save" icon="pi pi-check" />
+            <Button label="Delete" icon="pi pi-trash" />
+            <Button label="Cancel" icon="pi pi-times" />
+        </ButtonGroup>
     </div>
 </template>
 
 <script setup>
 import Button from '@/volt/button';
+import ButtonGroup from '@/volt/buttongroup';
 <\/script>
 `);
 </script>

apps/volt/doc/button/DisabledDoc.vue

@@ -1,9 +1,9 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Text to display on a button is defined with the <i>label</i> property.</p>
+        <p>When <i>disabled</i> is present, the element cannot be used.</p>
     </DocSectionText>
     <div class="card flex justify-center">
-        <Button label="Submit" />
+        <Button label="Submit" disabled />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -15,7 +15,7 @@ import { ref } from 'vue';
 const code = ref(`
 <template>
     <div class="card flex justify-center">
-        <Button label="Submit" />
+        <Button label="Submit" disabled />
     </div>
 </template>
 

apps/volt/doc/button/HeadlessDoc.vue

@@ -1,9 +1,16 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Text to display on a button is defined with the <i>label</i> property.</p>
+        <p>Headless mode is enabled by adding the <i>asChild</i> property and defining your own UI element with the available bindings.</p>
     </DocSectionText>
     <div class="card flex justify-center">
-        <Button label="Submit" />
+        <Button v-slot="slotProps" asChild>
+            <button
+                v-bind="slotProps.a11yAttrs"
+                class="rounded-lg bg-gradient-to-br from-primary-400 to-primary-700 active:from-primary-700 active:to-primary-900 text-white border-none px-6 py-3 font-bold hover:ring-2 cursor-pointer ring-offset-2 ring-offset-surface-0 dark:ring-offset-surface-900 ring-primary transition-all"
+            >
+                SIGN UP
+            </button>
+        </Button>
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -15,7 +22,14 @@ import { ref } from 'vue';
 const code = ref(`
 <template>
     <div class="card flex justify-center">
-        <Button label="Submit" />
+        <Button v-slot="slotProps" asChild>
+            <button
+                v-bind="slotProps.a11yAttrs"
+                class="rounded-lg bg-gradient-to-br from-primary-400 to-primary-700 active:from-primary-700 active:to-primary-900 text-white border-none px-6 py-3 font-bold hover:ring-2 cursor-pointer ring-offset-2 ring-offset-surface-0 dark:ring-offset-surface-900 ring-primary transition-all"
+            >
+                SIGN UP
+            </button>
+        </Button>
     </div>
 </template>
 

apps/volt/doc/button/IconOnlyDoc.vue

@@ -1,26 +1,155 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Text to display on a button is defined with the <i>label</i> property.</p>
+        <p>Buttons can have icons without labels.</p>
     </DocSectionText>
-    <div class="card flex justify-center">
-        <Button label="Submit" />
+    <div class="card">
+        <div class="flex justify-center mb-8">
+            <SelectButton v-model="size" :options="sizeOptions" optionLabel="label" optionValue="value" dataKey="label" />
+        </div>
+
+        <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" />
+        </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" />
+        </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" />
+        </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" />
+        </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>
     </div>
     <DocSectionCode :code="code" />
 </template>
 
 <script setup>
 import Button from '@/volt/button';
+import SelectButton from '@/volt/selectbutton';
 import { ref } from 'vue';
 
+const size = ref('normal');
+const sizeOptions = ref([
+    { label: 'Small', value: 'small' },
+    { label: 'Normal', value: 'normal' },
+    { label: 'Large', value: 'large' }
+]);
+
 const code = ref(`
 <template>
-    <div class="card flex justify-center">
-        <Button label="Submit" />
+    <div class="card">
+        <div class="flex justify-center mb-8">
+            <SelectButton v-model="size" :options="sizeOptions" optionLabel="label" optionValue="value" dataKey="label" />
+        </div>
+
+        <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" />
+        </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" />
+        </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" />
+        </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" />
+        </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>
     </div>
 </template>
 
 <script setup>
 import Button from '@/volt/button';
+import SelectButton from '@/volt/selectbutton';
+import { ref } from 'vue';
+
+const size = ref('normal');
+const sizeOptions = ref([
+    { label: 'Small', value: 'small' },
+    { label: 'Normal', value: 'normal' },
+    { label: 'Large', value: 'large' }
+]);
 <\/script>
 `);
 </script>

apps/volt/doc/button/IconsDoc.vue

@@ -1,9 +1,17 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Text to display on a button is defined with the <i>label</i> property.</p>
+        <p>Icon of a button is specified with <i>icon</i> property and position is configured using <i>iconPos</i> attribute.</p>
     </DocSectionText>
-    <div class="card flex justify-center">
-        <Button label="Submit" />
+    <div class="card flex flex-col items-center gap-4">
+        <div class="flex flex-wrap gap-4 justify-center">
+            <Button icon="pi pi-home" aria-label="Save" />
+            <Button label="Profile" icon="pi pi-user" />
+            <Button label="Save" icon="pi pi-check" iconPos="right" />
+        </div>
+        <div class="flex flex-wrap gap-4 justify-center">
+            <Button label="Search" icon="pi pi-search" iconPos="top" />
+            <Button label="Update" icon="pi pi-refresh" iconPos="bottom" />
+        </div>
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -14,8 +22,16 @@ import { ref } from 'vue';
 
 const code = ref(`
 <template>
-    <div class="card flex justify-center">
-        <Button label="Submit" />
+    <div class="card flex flex-col items-center gap-4">
+        <div class="flex flex-wrap gap-4 justify-center">
+            <Button icon="pi pi-home" aria-label="Save" />
+            <Button label="Profile" icon="pi pi-user" />
+            <Button label="Save" icon="pi pi-check" iconPos="right" />
+        </div>
+        <div class="flex flex-wrap gap-4 justify-center">
+            <Button label="Search" icon="pi pi-search" iconPos="top" />
+            <Button label="Update" icon="pi pi-refresh" iconPos="bottom" />
+        </div>
     </div>
 </template>
 

apps/volt/doc/button/ImportDoc.vue

@@ -1,26 +1,15 @@
 <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" />
+    <DocSectionText v-bind="$attrs" />
+    <DocSectionCode :code="code" lang="script" />
 </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>
+export default {
+    data() {
+        return {
+            code: `import Button from '@/volt/button';
+`
+        };
+    }
+};
 </script>

apps/volt/doc/button/LinkDoc.vue

@@ -1,9 +1,14 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Text to display on a button is defined with the <i>label</i> property.</p>
+        <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">
-        <Button label="Submit" />
+    <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>
@@ -14,8 +19,13 @@ import { ref } from 'vue';
 
 const code = ref(`
 <template>
-    <div class="card flex justify-center">
-        <Button label="Submit" />
+    <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>
 

apps/volt/doc/button/LoadingDoc.vue

@@ -1,9 +1,9 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Text to display on a button is defined with the <i>label</i> property.</p>
+        <p>Busy state is controlled with the <i>loading</i> property.</p>
     </DocSectionText>
     <div class="card flex justify-center">
-        <Button label="Submit" />
+        <Button type="button" label="Search" icon="pi pi-check" :loading="loading" @click="load" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -12,15 +12,34 @@
 import Button from '@/volt/button';
 import { ref } from 'vue';
 
+const loading = ref(false);
+
+const load = () => {
+    loading.value = true;
+    setTimeout(() => {
+        loading.value = false;
+    }, 2000);
+};
+
 const code = ref(`
 <template>
     <div class="card flex justify-center">
-        <Button label="Submit" />
+        <Button type="button" label="Search" icon="pi pi-check" :loading="loading" @click="load" />
     </div>
 </template>
 
 <script setup>
 import Button from '@/volt/button';
+import { ref } from 'vue';
+
+const loading = ref(false);
+
+const load = () => {
+    loading.value = true;
+    setTimeout(() => {
+        loading.value = false;
+    }, 2000);
+};
 <\/script>
 `);
 </script>

apps/volt/doc/button/OutlinedDoc.vue

@@ -1,9 +1,16 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Text to display on a button is defined with the <i>label</i> property.</p>
+        <p>Outlined buttons display a border without a transparent background.</p>
     </DocSectionText>
-    <div class="card flex justify-center">
-        <Button label="Submit" />
+    <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" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -14,8 +21,15 @@ import { ref } from 'vue';
 
 const code = ref(`
 <template>
-    <div class="card flex justify-center">
-        <Button label="Submit" />
+    <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" />
     </div>
 </template>
 

apps/volt/doc/button/RaisedDoc.vue

@@ -1,9 +1,16 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Text to display on a button is defined with the <i>label</i> property.</p>
+        <p>Raised buttons display a shadow to indicate elevation.</p>
     </DocSectionText>
-    <div class="card flex justify-center">
-        <Button label="Submit" />
+    <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 />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -14,8 +21,15 @@ import { ref } from 'vue';
 
 const code = ref(`
 <template>
-    <div class="card flex justify-center">
-        <Button label="Submit" />
+    <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 />
     </div>
 </template>
 

apps/volt/doc/button/RaisedTextDoc.vue

@@ -1,9 +1,16 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Text to display on a button is defined with the <i>label</i> property.</p>
+        <p>Text buttons can be displayed elevated with the <i>raised</i> option.</p>
     </DocSectionText>
-    <div class="card flex justify-center">
-        <Button label="Submit" />
+    <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 />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -14,8 +21,15 @@ import { ref } from 'vue';
 
 const code = ref(`
 <template>
-    <div class="card flex justify-center">
-        <Button label="Submit" />
+    <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 />
     </div>
 </template>
 

apps/volt/doc/button/RoundedDoc.vue

@@ -1,9 +1,16 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Text to display on a button is defined with the <i>label</i> property.</p>
+        <p>Rounded buttons have a circular border radius.</p>
     </DocSectionText>
-    <div class="card flex justify-center">
-        <Button label="Submit" />
+    <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 />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -14,8 +21,15 @@ import { ref } from 'vue';
 
 const code = ref(`
 <template>
-    <div class="card flex justify-center">
-        <Button label="Submit" />
+    <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 />
     </div>
 </template>
 

apps/volt/doc/button/SeverityDoc.vue

@@ -1,9 +1,16 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Text to display on a button is defined with the <i>label</i> property.</p>
+        <p>The <i>severity</i> property defines the variant of a button.</p>
     </DocSectionText>
-    <div class="card flex justify-center">
-        <Button label="Submit" />
+    <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" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -14,8 +21,15 @@ import { ref } from 'vue';
 
 const code = ref(`
 <template>
-    <div class="card flex justify-center">
-        <Button label="Submit" />
+    <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" />
     </div>
 </template>
 

apps/volt/doc/button/SizesDoc.vue

@@ -1,9 +1,11 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Text to display on a button is defined with the <i>label</i> property.</p>
+        <p>Button provides <i>small</i> and <i>large</i> sizes as alternatives to the base.</p>
     </DocSectionText>
-    <div class="card flex justify-center">
-        <Button label="Submit" />
+    <div class="card flex flex-wrap items-center justify-center gap-4">
+        <Button label="Small" icon="pi pi-check" size="small" />
+        <Button label="Normal" icon="pi pi-check" />
+        <Button label="Large" icon="pi pi-check" size="large" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -14,8 +16,10 @@ import { ref } from 'vue';
 
 const code = ref(`
 <template>
-    <div class="card flex justify-center">
-        <Button label="Submit" />
+    <div class="card flex flex-wrap items-center justify-center gap-4">
+        <Button label="Small" icon="pi pi-check" size="small" />
+        <Button label="Normal" icon="pi pi-check" />
+        <Button label="Large" icon="pi pi-check" size="large" />
     </div>
 </template>
 

apps/volt/doc/button/TemplateDoc.vue

@@ -1,9 +1,20 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Text to display on a button is defined with the <i>label</i> property.</p>
+        <p>Custom content inside a button is defined as children.</p>
     </DocSectionText>
     <div class="card flex justify-center">
-        <Button label="Submit" />
+        <Button variant="outlined" class="!border-2">
+            <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path
+                    d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
+                    fill="var(--p-primary-color)"
+                />
+                <path
+                    d="M30.69 4.21L24.37 4.81L22.57 0.69L22.86 0H26.48L30.69 4.21ZM23.75 5.67L22.66 3.08L18.05 14.24V17.14H19.7H20.03H20.16H20.2L24.1 15.7L30.11 5.19L23.75 5.67ZM4.21002 4.21L10.53 4.81L12.33 0.69L12.05 0H8.43002L4.22002 4.21H4.21002ZM21.9 17.4L20.6 18.2H14.3L13 17.4L12.4 18.2L12.42 18.23L17.45 26.8L22.48 18.23L22.5 18.2L21.9 17.4ZM4.79002 5.19L10.8 15.7L14.7 17.14H14.74H15.2H16.85V14.24L12.24 3.09L11.15 5.68L4.79002 5.2V5.19Z"
+                    fill="var(--p-text-color)"
+                />
+            </svg>
+        </Button>
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -15,7 +26,18 @@ import { ref } from 'vue';
 const code = ref(`
 <template>
     <div class="card flex justify-center">
-        <Button label="Submit" />
+        <Button variant="outlined" class="!border-2">
+            <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path
+                    d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
+                    fill="var(--p-primary-color)"
+                />
+                <path
+                    d="M30.69 4.21L24.37 4.81L22.57 0.69L22.86 0H26.48L30.69 4.21ZM23.75 5.67L22.66 3.08L18.05 14.24V17.14H19.7H20.03H20.16H20.2L24.1 15.7L30.11 5.19L23.75 5.67ZM4.21002 4.21L10.53 4.81L12.33 0.69L12.05 0H8.43002L4.22002 4.21H4.21002ZM21.9 17.4L20.6 18.2H14.3L13 17.4L12.4 18.2L12.42 18.23L17.45 26.8L22.48 18.23L22.5 18.2L21.9 17.4ZM4.79002 5.19L10.8 15.7L14.7 17.14H14.74H15.2H16.85V14.24L12.24 3.09L11.15 5.68L4.79002 5.2V5.19Z"
+                    fill="var(--p-text-color)"
+                />
+            </svg>
+        </Button>
     </div>
 </template>
 

apps/volt/doc/button/TextDoc.vue

@@ -1,9 +1,16 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Text to display on a button is defined with the <i>label</i> property.</p>
+        <p>Text buttons are displayed as textual elements.</p>
     </DocSectionText>
-    <div class="card flex justify-center">
-        <Button label="Submit" />
+    <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" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -14,8 +21,15 @@ import { ref } from 'vue';
 
 const code = ref(`
 <template>
-    <div class="card flex justify-center">
-        <Button label="Submit" />
+    <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" />
     </div>
 </template>
 

apps/volt/pages/button/index.vue

@@ -25,97 +25,95 @@ 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
-        }
-    ]
+    {
+        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>

apps/volt/volt/button/index.vue

@@ -18,6 +18,24 @@ import { ref } from 'vue';
 import { ptViewMerge } from '../utils';
 
 const theme = ref({
-    root: ``
+    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
+        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
+        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]
+    `,
+    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>

apps/volt/volt/buttongroup/index.vue

@@ -0,0 +1,23 @@
+<template>
+    <ButtonGroup
+        unstyled
+        :pt="theme"
+        :ptOptions="{
+            mergeProps: ptViewMerge
+        }"
+    >
+        <template v-for="(_, slotName) in $slots" v-slot:[slotName]="slotProps">
+            <slot :name="slotName" v-bind="slotProps ?? {}" />
+        </template>
+    </ButtonGroup>
+</template>
+
+<script setup>
+import ButtonGroup from 'primevue/buttongroup';
+import { ref } from 'vue';
+import { ptViewMerge } from '../utils';
+
+const theme = ref({
+    root: ``
+});
+</script>

packages/primevue/src/button/Button.vue

@@ -1,14 +1,14 @@
 <template>
-    <component v-if="!asChild" :is="as" v-ripple :class="cx('root')" v-bind="attrs">
+    <component v-if="!asChild" :is="as" v-ripple :class="cx('root')" :data-p="dataP" v-bind="attrs">
         <slot>
             <slot v-if="loading" name="loadingicon" :class="[cx('loadingIcon'), cx('icon')]" v-bind="ptm('loadingIcon')">
                 <span v-if="loadingIcon" :class="[cx('loadingIcon'), cx('icon'), loadingIcon]" v-bind="ptm('loadingIcon')" />
                 <SpinnerIcon v-else :class="[cx('loadingIcon'), cx('icon')]" spin v-bind="ptm('loadingIcon')" />
             </slot>
             <slot v-else name="icon" :class="[cx('icon')]" v-bind="ptm('icon')">
-                <span v-if="icon" :class="[cx('icon'), icon, iconClass]" v-bind="ptm('icon')"></span>
+                <span v-if="icon" :class="[cx('icon'), icon, iconClass]" :data-p="dataIconP" v-bind="ptm('icon')"></span>
             </slot>
-            <span :class="cx('label')" v-bind="ptm('label')">{{ label || '&nbsp;' }}</span>
+            <span :class="cx('label')" v-bind="ptm('label')" :data-p="dataLabelP">{{ label || '&nbsp;' }}</span>
             <Badge v-if="badge" :value="badge" :class="badgeClass" :severity="badgeSeverity" :unstyled="unstyled" :pt="ptm('pcBadge')"></Badge>
         </slot>
     </component>
@@ -16,6 +16,7 @@
 </template>
 
 <script>
+import { cn } from '@primeuix/utils';
 import { isEmpty } from '@primeuix/utils/object';
 import SpinnerIcon from '@primevue/icons/spinner';
 import Badge from 'primevue/badge';
@@ -67,6 +68,32 @@ export default {
         },
         hasFluid() {
             return isEmpty(this.fluid) ? !!this.$pcFluid : this.fluid;
+        },
+        dataP() {
+            return cn({
+                [this.size]: this.size,
+                'icon-only': this.hasIcon && !this.label && !this.badge,
+                loading: this.loading,
+                fluid: this.hasFluid,
+                rounded: this.rounded,
+                raised: this.raised,
+                outlined: this.variant === 'outlined',
+                text: this.variant === 'text',
+                link: this.link || this.variant === 'link',
+                vertical: (this.iconPos === 'top' || this.iconPos === 'bottom') && this.label
+            });
+        },
+        dataIconP() {
+            return cn({
+                [this.iconPos]: this.iconPos,
+                [this.size]: this.size
+            });
+        },
+        dataLabelP() {
+            return cn({
+                [this.size]: this.size,
+                'icon-only': this.hasIcon && !this.label && !this.badge
+            });
         }
     },
     components: {