diff --git a/src/components/badge/Badge.css b/src/components/badge/Badge.css
index 4a86ae80e..fe55f385a 100644
--- a/src/components/badge/Badge.css
+++ b/src/components/badge/Badge.css
@@ -7,7 +7,6 @@
 
 .p-overlay-badge {
     position: relative;
-    display: inline-block;
 }
 
 .p-overlay-badge .p-badge {
diff --git a/src/views/avatar/AvatarDemo.vue b/src/views/avatar/AvatarDemo.vue
index 1eb1845a0..e1ab79cad 100644
--- a/src/views/avatar/AvatarDemo.vue
+++ b/src/views/avatar/AvatarDemo.vue
@@ -30,9 +30,7 @@
                 <div class="p-col-12 p-md-4">
                     <div class="card">
                         <h5>Label - Badge</h5>
-                        <Badge value="4">
-                            <Avatar label="U" class="p-mr-2" size="xlarge" style="background-color:#4caf4f; color: #ffffff" />
-                        </Badge>
+                        <Avatar label="U" class="p-mr-2" size="xlarge" style="background-color:#4caf4f; color: #ffffff" v-badge="4" />
                     </div>
                 </div>
             </div>
@@ -59,9 +57,7 @@
                  <div class="p-col-12 p-md-4">
                     <div class="card">
                         <h5>Icon - Badge</h5>
-                        <Badge value="4" severity="success">
-                            <Avatar icon="pi pi-user" class="p-mr-2" size="xlarge" />
-                        </Badge>
+                        <Avatar icon="pi pi-user" class="p-mr-2" size="xlarge" v-badge="4"/>
                     </div>
                 </div>
             </div>
@@ -93,9 +89,7 @@
                  <div class="p-col-12 p-md-4">
                     <div class="card">
                         <h5>Image - Badge</h5>
-                        <Badge value="4" severity="danger">
-                            <Avatar image="demo/images/organization/walter.jpg" class="p-mr-2" size="xlarge" />
-                        </Badge>
+                        <Avatar image="demo/images/organization/walter.jpg" class="p-mr-2" size="xlarge" v-badge.danger="4" />
                     </div>
                 </div>
             </div>
diff --git a/src/views/avatar/AvatarDoc.vue b/src/views/avatar/AvatarDoc.vue
index aa5fffe37..01c40f577 100644
--- a/src/views/avatar/AvatarDoc.vue
+++ b/src/views/avatar/AvatarDoc.vue
@@ -49,12 +49,10 @@ import AvatarGroup from 'primevue/avatargroup';
 </code></pre>
 
 				<h5>Badge</h5>
-				<p>A badge can be added by wrapping the Avatar within a <router-link to="/badge">Badge</router-link> component.</p>
+				<p>A badge can be added to an Avatar with the <router-link to="/badge">Badge</router-link> directive.</p>
 <pre v-code>
 <code>
-&lt;Badge value="4" severity="info"&gt;
-	&lt;Avatar image="user.png" size="xlarge" /&gt;
-&lt;/Badge&gt;
+&lt;Avatar image="user.png" size="xlarge" v-badge.danger="4" /&gt;
 
 </code></pre>
 
@@ -211,9 +209,7 @@ import AvatarGroup from 'primevue/avatargroup';
 	&lt;div class="p-col-12 p-md-4"&gt;
 		&lt;div class="card"&gt;
 			&lt;h5&gt;Label - Badge&lt;/h5&gt;
-			&lt;Badge value="4"&gt;
-				&lt;Avatar label="U" class="p-mr-2" size="xlarge" style="background-color:#4caf4f; color: #ffffff" /&gt;
-			&lt;/Badge&gt;
+			&lt;Avatar label="U" class="p-mr-2" size="xlarge" style="background-color:#4caf4f; color: #ffffff" v-badge="4" /&gt;
 		&lt;/div&gt;
 	&lt;/div&gt;
 &lt;/div&gt;
@@ -240,9 +236,7 @@ import AvatarGroup from 'primevue/avatargroup';
 		&lt;div class="p-col-12 p-md-4"&gt;
 		&lt;div class="card"&gt;
 			&lt;h5&gt;Icon - Badge&lt;/h5&gt;
-			&lt;Badge value="4" severity="success"&gt;
-				&lt;Avatar icon="pi pi-user" class="p-mr-2" size="xlarge" /&gt;
-			&lt;/Badge&gt;
+			&lt;Avatar icon="pi pi-user" class="p-mr-2" size="xlarge" v-badge="4"/&gt;
 		&lt;/div&gt;
 	&lt;/div&gt;
 &lt;/div&gt;
@@ -271,12 +265,10 @@ import AvatarGroup from 'primevue/avatargroup';
 		&lt;/div&gt;
 	&lt;/div&gt;
 
-	&lt;div class="p-col-12 p-md-4"&gt;
+		&lt;div class="p-col-12 p-md-4"&gt;
 		&lt;div class="card"&gt;
 			&lt;h5&gt;Image - Badge&lt;/h5&gt;
-			&lt;Badge value="4" severity="danger"&gt;
-				&lt;Avatar image="demo/images/organization/walter.jpg" class="p-mr-2" size="xlarge" /&gt;
-			&lt;/Badge&gt;
+			&lt;Avatar image="demo/images/organization/walter.jpg" class="p-mr-2" size="xlarge" v-badge.danger="4" /&gt;
 		&lt;/div&gt;
 	&lt;/div&gt;
 &lt;/div&gt;