diff --git a/package.json b/package.json
index 1220b456..aa57b605 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@netdata/netdata-ui",
-  "version": "4.8.8",
+  "version": "4.8.9",
   "description": "netdata UI kit",
   "main": "dist/index.js",
   "module": "dist/es6/index.js",
diff --git a/src/components/pill/alertMastercard.js b/src/components/pill/alertMastercard.js
index 4a5797b2..88df43b2 100644
--- a/src/components/pill/alertMastercard.js
+++ b/src/components/pill/alertMastercard.js
@@ -15,13 +15,14 @@ const AlertMasterCard = forwardRef(
       pillLeft = {},
       pillRight = {},
       pillEnd,
+      containerProps = {},
       round,
       size,
       ...rest
     },
     ref
   ) => {
-    const commonProps = { height, round, size }
+    const commonProps = { height, round, size, ...containerProps }
     const iconProps = {
       background: masterCardColorMap.alert,
       color: "text",
diff --git a/src/components/pill/styled.js b/src/components/pill/styled.js
index 6f3ee327..b68580af 100644
--- a/src/components/pill/styled.js
+++ b/src/components/pill/styled.js
@@ -5,14 +5,19 @@ import { getPillColor } from "./mixins/colors"
 import getPillPadding from "./mixins/padding"
 
 export const MasterCardContainer = styled(Flex).attrs(
-  ({ background, height, onClick, round = 999, size }) => ({
+  ({ background, height, onClick, round = 999, size, ...props }) => ({
     background,
     ...(onClick && { cursor: "pointer" }),
     position: "relative",
     round,
     size,
+    ...props,
   })
 )`
+  -webkit-user-select: ${({ noUserSelection }) => (noUserSelection ? "none" : "auto")};
+  -ms-user-select: ${({ noUserSelection }) => (noUserSelection ? "none" : "auto")};
+  user-select: ${({ noUserSelection }) => (noUserSelection ? "none" : "auto")};
+
   * {
     cursor: ${({ onClick }) => (onClick ? "pointer" : "inherit")};
   }