diff --git a/src/views/button/ButtonDoc.vue b/src/views/button/ButtonDoc.vue
index d3c33b0b8..8c5909b48 100755
--- a/src/views/button/ButtonDoc.vue
+++ b/src/views/button/ButtonDoc.vue
@@ -231,9 +231,12 @@ import Button from 'primevue/button';
 			</TabPanel>
 
 			<TabPanel header="Source">
-				<a href="https://github.com/primefaces/primevue/tree/master/src/views/button" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
-					<span>View on GitHub</span>
-				</a>
+				<div class="p-d-flex p-jc-between">
+                    <a href="https://github.com/primefaces/primevue/tree/master/src/views/button" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
+                        <span>View on GitHub</span>
+                    </a>
+                    <LiveEditor name="ButtonDemo" :sources="sources"/>
+                </div>
 <pre v-code>
 <code><template v-pre>
 &lt;h5&gt;Basic&lt;/h5&gt;
@@ -360,4 +363,147 @@ button {
 			</TabPanel>
 		</TabView>
 	</div>
-</template>
\ No newline at end of file
+</template>
+
+<script>
+import LiveEditor from '../liveeditor/LiveEditor';
+export default {
+    data() {
+        return {
+            sources: {
+                'template': {
+                    content: `<template>
+    <div class="layout-content">
+        <div class="content-section implementation">
+            <div class="card">
+                <h5>Basic</h5>
+                <Button label="Submit" />
+                <Button label="Disabled" disabled="disabled" />
+                <Button label="Link" class="p-button-link" />
+
+                <h5>Icons</h5>
+                <Button icon="pi pi-check" />
+                <Button label="Submit" icon="pi pi-check" />
+                <Button label="Submit" icon="pi pi-check" iconPos="right" />
+
+                <h5>Severities</h5>
+                <Button label="Primary" />
+                <Button label="Secondary" class="p-button-secondary" />
+                <Button label="Success" class="p-button-success" />
+                <Button label="Info" class="p-button-info" />
+                <Button label="Warning" class="p-button-warning" />
+                <Button label="Help" class="p-button-help" />
+                <Button label="Danger" class="p-button-danger" />
+
+                <h5>Raised Buttons</h5>
+                <Button label="Primary" class="p-button-raised" />
+                <Button label="Secondary" class="p-button-raised p-button-secondary" />
+                <Button label="Success" class="p-button-raised p-button-success" />
+                <Button label="Info" class="p-button-raised p-button-info" />
+                <Button label="Warning" class="p-button-raised p-button-warning" />
+                <Button label="Help" class="p-button-raised p-button-help" />
+                <Button label="Danger" class="p-button-raised p-button-danger" />
+
+                <h5>Rounded Buttons</h5>
+                <Button label="Primary" class="p-button-rounded" />
+                <Button label="Secondary" class="p-button-rounded p-button-secondary" />
+                <Button label="Success" class="p-button-rounded p-button-success" />
+                <Button label="Info" class="p-button-rounded p-button-info" />
+                <Button label="Warning" class="p-button-rounded p-button-warning" />
+                <Button label="Help" class="p-button-rounded p-button-help" />
+                <Button label="Danger" class="p-button-rounded p-button-danger" />
+
+                <h5>Text Buttons</h5>
+                <Button label="Primary" class="p-button-text" />
+                <Button label="Secondary" class="p-button-secondary p-button-text" />
+                <Button label="Success" class="p-button-success p-button-text" />
+                <Button label="Info" class="p-button-info p-button-text" />
+                <Button label="Warning" class="p-button-warning p-button-text" />
+                <Button label="Help" class="p-button-help p-button-text" />
+                <Button label="Danger" class="p-button-danger p-button-text" />
+                <Button label="Plain" class="p-button-text p-button-plain" />
+
+                <h5>Raised Text Buttons</h5>
+                <Button label="Primary" class="p-button-raised p-button-text" />
+                <Button label="Secondary" class="p-button-raised p-button-secondary p-button-text" />
+                <Button label="Success" class="p-button-raised p-button-success p-button-text" />
+                <Button label="Info" class="p-button-raised p-button-info p-button-text" />
+                <Button label="Warning" class="p-button-raised p-button-warning p-button-text" />
+                <Button label="Help" class="p-button-raised p-button-help p-button-text" />
+                <Button label="Danger" class="p-button-raised p-button-danger p-button-text" />
+                <Button label="Plain" class="p-button-raised p-button-text p-button-plain" />
+
+                <h5>Outlined Buttons</h5>
+                <Button label="Primary" class="p-button-outlined" />
+                <Button label="Secondary" class="p-button-outlined p-button-secondary" />
+                <Button label="Success" class="p-button-outlined p-button-success" />
+                <Button label="Info" class="p-button-outlined p-button-info" />
+                <Button label="Warning" class="p-button-outlined p-button-warning" />
+                <Button label="Help" class="p-button-outlined p-button-help" />
+                <Button label="Danger" class="p-button-outlined p-button-danger" />
+
+                <h5>Rounded Icon Buttons</h5>
+                <Button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary" />
+                <Button icon="pi pi-search" class="p-button-rounded p-button-success" />
+                <Button icon="pi pi-user" class="p-button-rounded p-button-info" />
+                <Button icon="pi pi-bell" class="p-button-rounded p-button-warning" />
+                <Button icon="pi pi-heart" class="p-button-rounded p-button-help" />
+                <Button icon="pi pi-times" class="p-button-rounded p-button-danger" />
+                <Button icon="pi pi-check" class="p-button-rounded" />
+
+                <h5>Rounded Text Icon Buttons</h5>
+                <Button icon="pi pi-check" class="p-button-rounded p-button-text" />
+                <Button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary p-button-text" />
+                <Button icon="pi pi-search" class="p-button-rounded p-button-success p-button-text" />
+                <Button icon="pi pi-user" class="p-button-rounded p-button-info p-button-text" />
+                <Button icon="pi pi-bell" class="p-button-rounded p-button-warning p-button-text" />
+                <Button icon="pi pi-heart" class="p-button-rounded p-button-help p-button-text" />
+                <Button icon="pi pi-times" class="p-button-rounded p-button-danger p-button-text" />
+                <Button icon="pi pi-filter" class="p-button-rounded p-button-text p-button-plain" />
+
+                <h5>Rounded and Outlined Icon Buttons</h5>
+                <Button icon="pi pi-check" class="p-button-rounded p-button-outlined" />
+                <Button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary p-button-outlined" />
+                <Button icon="pi pi-search" class="p-button-rounded p-button-success p-button-outlined" />
+                <Button icon="pi pi-user" class="p-button-rounded p-button-info p-button-outlined" />
+                <Button icon="pi pi-bell" class="p-button-rounded p-button-warning p-button-outlined" />
+                <Button icon="pi pi-heart" class="p-button-rounded p-button-help p-button-outlined" />
+                <Button icon="pi pi-times" class="p-button-rounded p-button-danger p-button-outlined" />
+
+                <h5>Badges</h5>
+                <Button type="button" label="Emails" badge="8" />
+                <Button type="button" label="Messages" icon="pi pi-users" class="p-button-warning" badge="8" badgeClass="p-badge-danger" />
+
+                <h5>Button Set</h5>
+                <span class="p-buttonset">
+                    <Button label="Save" icon="pi pi-check" />
+                    <Button label="Delete" icon="pi pi-trash" />
+                    <Button label="Cancel" icon="pi pi-times" />
+                </span>
+
+                <h5>Sizes</h5>
+                <div class="sizes">
+                    <Button label="Small" icon="pi pi-check" class="p-button-sm"  />
+                    <Button label="Normal" icon="pi pi-check" class="p-button"  />
+                    <Button label="Large" icon="pi pi-check" class="p-button-lg" />
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<style>
+.p-button {
+    margin-right: .5rem;
+    margin-bottom: .5rem;
+}
+</style>
+                    `
+                }
+            }
+        }
+    },
+    components: {
+        LiveEditor
+    }
+}
+</script>
\ No newline at end of file