diff --git a/scm-ui-components/packages/ui-components/src/Tag.js b/scm-ui-components/packages/ui-components/src/Tag.js
new file mode 100644
index 0000000000..9a3810e9ba
--- /dev/null
+++ b/scm-ui-components/packages/ui-components/src/Tag.js
@@ -0,0 +1,41 @@
+//@flow
+import * as React from "react";
+import classNames from "classnames";
+
+type Props = {
+  className?: string,
+  color?: string,
+  icon?: string,
+  label: string,
+  title?: string
+};
+
+class Tag extends React.Component<Props> {
+  static defaultProps = {
+    color: "light"
+  };
+
+  render() {
+    const { icon, label, title, color, className } = this.props;
+    let showIcon = null;
+    if (icon) {
+      showIcon = (
+        <>
+          <i className={classNames("fas", `fa-${icon}`)} />&nbsp;
+        </>
+      );
+    }
+
+    return (
+      <span
+        className={classNames("tag", `is-${color}`, className)}
+        title={title}
+      >
+        {showIcon}
+        {label}
+      </span>
+    );
+  }
+}
+
+export default Tag;
diff --git a/scm-ui-components/packages/ui-components/src/index.js b/scm-ui-components/packages/ui-components/src/index.js
index 35acd26369..1745dd8576 100644
--- a/scm-ui-components/packages/ui-components/src/index.js
+++ b/scm-ui-components/packages/ui-components/src/index.js
@@ -23,6 +23,7 @@ export { default as FileSize } from "./FileSize.js";
 export { default as ProtectedRoute } from "./ProtectedRoute.js";
 export { default as Help } from "./Help";
 export { default as HelpIcon } from "./HelpIcon";
+export { default as Tag } from "./Tag";
 export { default as Tooltip } from "./Tooltip";
 // TODO do we need this? getPageFromMatch is already exported by urls
 export { getPageFromMatch } from "./urls";