diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbbadge.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbbadge.directive.js
new file mode 100644
index 0000000000..ee2c53eba0
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbbadge.directive.js
@@ -0,0 +1,23 @@
+(function() {
+    'use strict';
+
+    function BadgeDirective() {
+
+        var directive = {
+            restrict: 'E',
+            replace: true,
+            transclude: true,
+            templateUrl: 'views/components/umb-badge.html',
+            scope: {
+                size: "@?",
+                color: "@?"
+            }
+        };
+
+        return directive;
+
+    }
+
+    angular.module('umbraco.directives').directive('umbBadge', BadgeDirective);
+
+})();
diff --git a/src/Umbraco.Web.UI.Client/src/less/belle.less b/src/Umbraco.Web.UI.Client/src/less/belle.less
index cfe82ff3ea..7367e9cffd 100644
--- a/src/Umbraco.Web.UI.Client/src/less/belle.less
+++ b/src/Umbraco.Web.UI.Client/src/less/belle.less
@@ -120,6 +120,7 @@
 @import "components/umb-querybuilder.less";
 @import "components/umb-pagination.less";
 @import "components/umb-mini-list-view.less";
+@import "components/umb-badge.less";
 
 @import "components/buttons/umb-button.less";
 @import "components/buttons/umb-button-group.less";
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-badge.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-badge.less
new file mode 100644
index 0000000000..152eedc83f
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-badge.less
@@ -0,0 +1,65 @@
+.umb-badge {
+    padding: 6px 8px;
+    margin: 0 5px 0 0;
+    font-weight: 600;
+    color: @black;
+    background-color: @turquoise-washed;
+    border-width: 1px;
+    border-style: solid;
+    border-color: @turquoise;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+}
+
+// Colors
+.umb-badge--primary {
+    background-color: @turquoise-washed;
+    border-color: @turquoise;
+}
+
+.umb-badge--seconday {
+    background-color: @purple-washed;
+    border-color: @purple;
+}
+
+.umb-badge--danger {
+    background-color: @red-washed;
+    border-color: @red;
+}
+
+.umb-badge--warning {
+    background-color: @yellow-washed;
+    border-color: @yellow;
+}
+
+.umb-badge--success {
+    background-color: @green-washed;
+    border-color: @green;
+}
+
+// Size
+.umb-badge--xs {
+    font-size: 13px;
+    padding: 1px 6px;
+}
+
+.umb-badge--s {
+    font-size: 14px;
+    padding: 3px 6px;
+}
+
+.umb-badge--m {
+    font-size: 16px;
+    padding: 6px 8px;
+}
+
+.umb-badge--l {
+    font-size: 18px;
+    padding: 6px 8px;
+}
+
+.umb-badge--xl {
+    font-size: 20px;
+    padding: 6px 8px;
+}
\ No newline at end of file
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/umb-badge.html b/src/Umbraco.Web.UI.Client/src/views/components/umb-badge.html
new file mode 100644
index 0000000000..1fd0c91520
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/views/components/umb-badge.html
@@ -0,0 +1 @@
+<span class="umb-badge umb-badge--{{color}} umb-badge--{{size}}" ng-transclude></span>
\ No newline at end of file