diff --git a/apps/showcase/doc/datatable/ExportDoc.vue b/apps/showcase/doc/datatable/ExportDoc.vue
index d4f3c56c2..364ef4707 100644
--- a/apps/showcase/doc/datatable/ExportDoc.vue
+++ b/apps/showcase/doc/datatable/ExportDoc.vue
@@ -6,7 +6,7 @@
         <div class="card">
             <DataTable ref="dt" :value="products" tableStyle="min-width: 50rem">
                 <template #header>
-                    <div style="text-align: left">
+                    <div class="text-end pb-4">
                         <Button icon="pi pi-external-link" label="Export" @click="exportCSV($event)" />
                     </div>
                 </template>
@@ -31,7 +31,7 @@ export default {
                 basic: `
 <DataTable :value="products" ref="dt" tableStyle="min-width: 50rem">
     <template #header>
-        <div style="text-align: left">
+        <div class="text-end pb-4">
             <Button icon="pi pi-external-link" label="Export" @click="exportCSV($event)" />
         </div>
     </template>
@@ -46,7 +46,7 @@ export default {
     <div>
         <DataTable :value="products" ref="dt" tableStyle="min-width: 50rem">
             <template #header>
-                <div style="text-align: left">
+                <div class="text-end pb-4">
                     <Button icon="pi pi-external-link" label="Export" @click="exportCSV($event)" />
                 </div>
             </template>
@@ -84,7 +84,7 @@ export default {
     <div>
         <DataTable :value="products" ref="dt" tableStyle="min-width: 50rem">
             <template #header>
-                <div style="text-align: left">
+                <div class="text-end pb-4">
                     <Button icon="pi pi-external-link" label="Export" @click="exportCSV($event)" />
                 </div>
             </template>
diff --git a/apps/showcase/doc/datatable/samples/ProductsDoc.vue b/apps/showcase/doc/datatable/samples/ProductsDoc.vue
index d66adcdde..667929a5e 100644
--- a/apps/showcase/doc/datatable/samples/ProductsDoc.vue
+++ b/apps/showcase/doc/datatable/samples/ProductsDoc.vue
@@ -6,13 +6,13 @@
         <div class="card">
             <Toolbar class="mb-6">
                 <template #start>
-                    <Button label="New" icon="pi pi-plus" severity="success" class="mr-2" @click="openNew" />
-                    <Button label="Delete" icon="pi pi-trash" severity="danger" @click="confirmDeleteSelected" :disabled="!selectedProducts || !selectedProducts.length" />
+                    <Button label="New" icon="pi pi-plus" class="mr-2" @click="openNew" />
+                    <Button label="Delete" icon="pi pi-trash" severity="danger" outlined @click="confirmDeleteSelected" :disabled="!selectedProducts || !selectedProducts.length" />
                 </template>
 
                 <template #end>
-                    <FileUpload mode="basic" accept="image/*" :maxFileSize="1000000" label="Import" chooseLabel="Import" class="mr-2" auto />
-                    <Button label="Export" icon="pi pi-upload" severity="help" @click="exportCSV($event)" />
+                    <FileUpload mode="basic" accept="image/*" :maxFileSize="1000000" label="Import" customUpload chooseLabel="Import" class="mr-2" auto :chooseButtonProps="{ severity: 'secondary' }" />
+                    <Button label="Export" icon="pi pi-upload" severity="secondary" @click="exportCSV($event)" />
                 </template>
             </Toolbar>
 
@@ -183,13 +183,13 @@ export default {
                 basic: `
 <Toolbar class="mb-6">
     <template #start>
-        <Button label="New" icon="pi pi-plus" severity="success" class="mr-2" @click="openNew" />
-        <Button label="Delete" icon="pi pi-trash" severity="danger" @click="confirmDeleteSelected" :disabled="!selectedProducts || !selectedProducts.length" />
+        <Button label="New" icon="pi pi-plus" class="mr-2" @click="openNew" />
+        <Button label="Delete" icon="pi pi-trash" severity="danger" outlined @click="confirmDeleteSelected" :disabled="!selectedProducts || !selectedProducts.length" />
     </template>
 
     <template #end>
-        <FileUpload mode="basic" accept="image/*" :maxFileSize="1000000" label="Import" chooseLabel="Import" class="mr-2" auto />
-        <Button label="Export" icon="pi pi-upload" severity="help" @click="exportCSV($event)" />
+        <FileUpload mode="basic" accept="image/*" :maxFileSize="1000000" label="Import" customUpload chooseLabel="Import" class="mr-2" auto :chooseButtonProps="{ severity: 'secondary' }" />
+        <Button label="Export" icon="pi pi-upload" severity="secondary" @click="exportCSV($event)" />
     </template>
 </Toolbar>
 
@@ -255,13 +255,13 @@ export default {
         <div class="card">
             <Toolbar class="mb-6">
                 <template #start>
-                    <Button label="New" icon="pi pi-plus" severity="success" class="mr-2" @click="openNew" />
-                    <Button label="Delete" icon="pi pi-trash" severity="danger" @click="confirmDeleteSelected" :disabled="!selectedProducts || !selectedProducts.length" />
+                    <Button label="New" icon="pi pi-plus" class="mr-2" @click="openNew" />
+                    <Button label="Delete" icon="pi pi-trash" severity="danger" outlined @click="confirmDeleteSelected" :disabled="!selectedProducts || !selectedProducts.length" />
                 </template>
 
                 <template #end>
-                    <FileUpload mode="basic" accept="image/*" :maxFileSize="1000000" label="Import" chooseLabel="Import" class="mr-2" auto />
-                    <Button label="Export" icon="pi pi-upload" severity="help" @click="exportCSV($event)" />
+                    <FileUpload mode="basic" accept="image/*" :maxFileSize="1000000" label="Import" customUpload chooseLabel="Import" class="mr-2" auto :chooseButtonProps="{ severity: 'secondary' }" />
+                    <Button label="Export" icon="pi pi-upload" severity="secondary" @click="exportCSV($event)" />
                 </template>
             </Toolbar>
 
@@ -547,13 +547,13 @@ export default {
         <div class="card">
             <Toolbar class="mb-6">
                 <template #start>
-                    <Button label="New" icon="pi pi-plus" severity="success" class="mr-2" @click="openNew" />
-                    <Button label="Delete" icon="pi pi-trash" severity="danger" @click="confirmDeleteSelected" :disabled="!selectedProducts || !selectedProducts.length" />
+                    <Button label="New" icon="pi pi-plus" class="mr-2" @click="openNew" />
+                    <Button label="Delete" icon="pi pi-trash" severity="danger" outlined @click="confirmDeleteSelected" :disabled="!selectedProducts || !selectedProducts.length" />
                 </template>
 
                 <template #end>
-                    <FileUpload mode="basic" accept="image/*" :maxFileSize="1000000" label="Import" chooseLabel="Import" class="mr-2" auto />
-                    <Button label="Export" icon="pi pi-upload" severity="help" @click="exportCSV($event)" />
+                    <FileUpload mode="basic" accept="image/*" :maxFileSize="1000000" label="Import" customUpload chooseLabel="Import" class="mr-2" auto :chooseButtonProps="{ severity: 'secondary' }" />
+                    <Button label="Export" icon="pi pi-upload" severity="secondary" @click="exportCSV($event)" />
                 </template>
             </Toolbar>