diff --git a/exampleSite/content/app/person.md b/exampleSite/content/app/person.md
index 1334976..b0c2c4e 100644
--- a/exampleSite/content/app/person.md
+++ b/exampleSite/content/app/person.md
@@ -20,13 +20,7 @@ cyberscopes example site - view / edit person (user) data.
   Last Name: {{< pv/data-field-line name="lastname" >}}
   Email: {{< pv/data-field-line name="email" default="hm@cy55.de" >}}
 
-  {{< pv/button mode="view" exec="chmode" action="edit" label="Edit" >}}
-  {{< pv/button mode="view" exec="chmode" action="new" label="New" >}}
-  {{< pv/button mode="edit new" exec="chmode" action="view" label="Cancel" >}}
-  {{< pv/button mode="edit" label="Save Changes" >}}
-  {{< pv/button mode="edit" exec="copynew" label="Copy Data" >}}
-  {{< pv/button mode="edit" action="delete" label="Delete Item" >}}
-  {{< pv/button mode="new" label="Create Item" >}}
+  {{< pv/data-buttons include="view" >}}
 
 <br>
   {{< pv/data-display
diff --git a/layouts/partials/button.html b/layouts/partials/button.html
new file mode 100644
index 0000000..f55ce34
--- /dev/null
+++ b/layouts/partials/button.html
@@ -0,0 +1,3 @@
+<button type="{{ .type }}" name="{{ .name }}" 
+		{{- with .mode }}v-show="hasmode('{{ . }}')"{{ end -}}
+	    @click="{{ .exec }}('{{ .action }}')">{{.label}}</button>
diff --git a/layouts/shortcodes/pv/data-buttons.html b/layouts/shortcodes/pv/data-buttons.html
new file mode 100644
index 0000000..688cfb8
--- /dev/null
+++ b/layouts/shortcodes/pv/data-buttons.html
@@ -0,0 +1,26 @@
+{{- $defparams := dict "type" "button" "name" "submit" 
+	"exec" "exec" "action" "" "label" "Submit" -}}
+
+{{- $params := merge $defparams (
+	dict "mode" "view" "exec" "chmode" "action" "edit" "label" "Edit") -}}
+{{ partial "button" $params }}
+
+{{- $params = merge $params (dict "action" "new" "label" "New") -}}
+{{ partial "button" $params }}
+
+{{- $params = merge $params (
+	dict "mode" "edit new" "action" "view" "label" "Cancel") -}}
+{{ partial "button" $params }}
+
+{{- $params = merge $defparams ( dict "mode" "edit" "label" "Save Changes") -}}
+{{ partial "button" $params }}
+
+{{- $params = merge $params (dict "exec" "copynew" "label" "Copy Data") -}}
+{{ partial "button" $params }}
+
+{{- $params = merge $params (dict "exec" "delete" "label" "Delete Item") -}}
+{{ partial "button" $params }}
+
+{{- $params = merge $defparams ( dict "mode" "new" "label" "Create Item") -}}
+{{ partial "button" $params }}
+
diff --git a/layouts/shortcodes/pv/data-tabs.html b/layouts/shortcodes/pv/data-tabs.html
index 4a5c879..1b24e28 100644
--- a/layouts/shortcodes/pv/data-tabs.html
+++ b/layouts/shortcodes/pv/data-tabs.html
@@ -1,15 +1,14 @@
 <ul class="nav nav-tabs">
   <li class="nav-item">
     <a class="nav-link" @click.prevent="chmode('view')" href="#"
-       :class="state.mode == 'view' ? 'active' : null">View</a>
+       :class="hasmode('view') ? 'active' : null">View</a>
   </li>
   <li class="nav-item">
     <a class="nav-link" @click.prevent="chmode('edit')" href="#"
-       :class="state.mode == 'edit' ? 'active' : null">Edit</a>
+       :class="hasmode('edit')? 'active' : null">Edit</a>
   </li>
   <li class="nav-item">
     <a class="nav-link" @click.prevent="chmode('new')" href="#"
-       :class="state.mode == 'new' ? 'active' : null">New</a>
+       :class="hasmode('new') ? 'active' : null">New</a>
   </li>
 </ul>
-</ul>