diff --git a/src/renderer/components/badge/badge.scss b/src/renderer/components/badge/badge.scss
index bcc5df4f1a..e0e3eb6df3 100644
--- a/src/renderer/components/badge/badge.scss
+++ b/src/renderer/components/badge/badge.scss
@@ -1,14 +1,17 @@
 .Badge {
   display: inline-block;
-  background: $colorVague;
-  color: $textColorSecondary;
-  border-radius: $radius;
-  padding: .2em .4em;
   white-space: nowrap;
   max-width: 100%;
   overflow: hidden;
   text-overflow: ellipsis;
 
+  &:not(.flat) {
+    background: $colorVague;
+    color: $textColorSecondary;
+    border-radius: $radius;
+    padding: .2em .4em;
+  }
+
   &.small {
     font-size: $font-size-small;
   }
diff --git a/src/renderer/components/badge/badge.tsx b/src/renderer/components/badge/badge.tsx
index e30aa5d668..424533c463 100644
--- a/src/renderer/components/badge/badge.tsx
+++ b/src/renderer/components/badge/badge.tsx
@@ -6,16 +6,17 @@ import { TooltipDecoratorProps, withTooltip } from "../tooltip";
 
 export interface BadgeProps extends React.HTMLAttributes<any>, TooltipDecoratorProps {
   small?: boolean;
+  flat?: boolean;
   label?: React.ReactNode;
 }
 
 @withTooltip
 export class Badge extends React.Component<BadgeProps> {
   render() {
-    const { className, label, small, children, ...elemProps } = this.props;
+    const { className, label, small, flat, children, ...elemProps } = this.props;
 
     return <>
-      <span className={cssNames("Badge", { small }, className)} {...elemProps}>
+      <span className={cssNames("Badge", { small, flat }, className)} {...elemProps}>
         {label}
         {children}
       </span>