diff --git a/web/components/label.css b/web/components/label.css
--- a/web/components/label.css
+++ b/web/components/label.css
@@ -2,4 +2,14 @@
   line-height: 1.5;
   padding: 4px 8px;
   border-radius: 8px;
+  display: flex;
+}
+
+button.close {
+  display: flex;
+  align-items: center;
+  margin-left: 4px;
+  background: transparent;
+  border: none;
+  color: inherit;
 }
diff --git a/web/components/label.react.js b/web/components/label.react.js
--- a/web/components/label.react.js
+++ b/web/components/label.react.js
@@ -2,6 +2,7 @@
 
 import * as React from 'react';
 
+import SWMansionIcon from '../SWMansionIcon.react';
 import css from './label.css';
 
 type Props = {
@@ -9,6 +10,7 @@
   +color?: string,
   +bg?: string,
   +children: React.Node,
+  +onClose?: () => mixed,
 };
 
 function Label(props: Props): React.Node {
@@ -17,6 +19,7 @@
     color = 'var(--label-default-color)',
     bg = 'var(--label-default-bg)',
     children,
+    onClose,
   } = props;
 
   const labelStyle = React.useMemo(
@@ -28,9 +31,21 @@
     [bg, color, size],
   );
 
+  const closeButton = React.useMemo(() => {
+    if (!onClose) {
+      return null;
+    }
+    return (
+      <button className={css.close} onClick={onClose}>
+        <SWMansionIcon icon="cross" size={size} />
+      </button>
+    );
+  }, [onClose, size]);
+
   return (
     <div style={labelStyle} className={css.label}>
       {children}
+      {closeButton}
     </div>
   );
 }