diff --git a/docs/src/pages/components/.eslintrc.js b/docs/src/pages/components/.eslintrc.js
index 5747e9d1fbf793..4eb66e683b1fb8 100644
--- a/docs/src/pages/components/.eslintrc.js
+++ b/docs/src/pages/components/.eslintrc.js
@@ -1,7 +1,7 @@
 module.exports = {
   rules: {
     // useful for interactions feedback
-    'no-alert': 'off',
+    'no-console': ['off', { allow: ['info'] }],
     // not very friendly to prop forwarding
     'react/jsx-handler-names': 'off',
   },
diff --git a/docs/src/pages/components/breadcrumbs/CollapsedBreadcrumbs.js b/docs/src/pages/components/breadcrumbs/CollapsedBreadcrumbs.js
index c69a547a05cc94..a6945738943d45 100644
--- a/docs/src/pages/components/breadcrumbs/CollapsedBreadcrumbs.js
+++ b/docs/src/pages/components/breadcrumbs/CollapsedBreadcrumbs.js
@@ -18,7 +18,7 @@ const useStyles = makeStyles(theme => ({
 
 function handleClick(event) {
   event.preventDefault();
-  alert('You clicked a breadcrumb.');
+  console.info('You clicked a breadcrumb.');
 }
 
 export default function CollapsedBreadcrumbs() {
diff --git a/docs/src/pages/components/breadcrumbs/CollapsedBreadcrumbs.tsx b/docs/src/pages/components/breadcrumbs/CollapsedBreadcrumbs.tsx
index 56eb3a77cd02be..e1f217dde586ae 100644
--- a/docs/src/pages/components/breadcrumbs/CollapsedBreadcrumbs.tsx
+++ b/docs/src/pages/components/breadcrumbs/CollapsedBreadcrumbs.tsx
@@ -20,7 +20,7 @@ const useStyles = makeStyles((theme: Theme) =>
 
 function handleClick(event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) {
   event.preventDefault();
-  alert('You clicked a breadcrumb.');
+  console.info('You clicked a breadcrumb.');
 }
 
 export default function CollapsedBreadcrumbs() {
diff --git a/docs/src/pages/components/breadcrumbs/CustomSeparator.js b/docs/src/pages/components/breadcrumbs/CustomSeparator.js
index dd1e45dda017b1..41e5bf4d53b841 100644
--- a/docs/src/pages/components/breadcrumbs/CustomSeparator.js
+++ b/docs/src/pages/components/breadcrumbs/CustomSeparator.js
@@ -18,7 +18,7 @@ const useStyles = makeStyles(theme => ({
 
 function handleClick(event) {
   event.preventDefault();
-  alert('You clicked a breadcrumb.');
+  console.info('You clicked a breadcrumb.');
 }
 
 export default function CustomSeparator() {
diff --git a/docs/src/pages/components/breadcrumbs/CustomSeparator.tsx b/docs/src/pages/components/breadcrumbs/CustomSeparator.tsx
index fbbb404ef9bdb0..88409a13ba8753 100644
--- a/docs/src/pages/components/breadcrumbs/CustomSeparator.tsx
+++ b/docs/src/pages/components/breadcrumbs/CustomSeparator.tsx
@@ -20,7 +20,7 @@ const useStyles = makeStyles((theme: Theme) =>
 
 function handleClick(event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) {
   event.preventDefault();
-  alert('You clicked a breadcrumb.');
+  console.info('You clicked a breadcrumb.');
 }
 
 export default function CustomSeparator() {
diff --git a/docs/src/pages/components/breadcrumbs/CustomizedBreadcrumbs.js b/docs/src/pages/components/breadcrumbs/CustomizedBreadcrumbs.js
index be95d5fed6f587..db8fbaeef4337e 100644
--- a/docs/src/pages/components/breadcrumbs/CustomizedBreadcrumbs.js
+++ b/docs/src/pages/components/breadcrumbs/CustomizedBreadcrumbs.js
@@ -24,7 +24,7 @@ const StyledBreadcrumb = withStyles(theme => ({
 
 function handleClick(event) {
   event.preventDefault();
-  alert('You clicked a breadcrumb.');
+  console.info('You clicked a breadcrumb.');
 }
 
 const useStyles = makeStyles(theme => ({
diff --git a/docs/src/pages/components/breadcrumbs/CustomizedBreadcrumbs.tsx b/docs/src/pages/components/breadcrumbs/CustomizedBreadcrumbs.tsx
index cdcf5b6273e62f..17a24297a0cdb7 100644
--- a/docs/src/pages/components/breadcrumbs/CustomizedBreadcrumbs.tsx
+++ b/docs/src/pages/components/breadcrumbs/CustomizedBreadcrumbs.tsx
@@ -24,7 +24,7 @@ const StyledBreadcrumb = withStyles((theme: Theme) => ({
 
 function handleClick(event: React.MouseEvent<Element, MouseEvent>) {
   event.preventDefault();
-  alert('You clicked a breadcrumb.');
+  console.info('You clicked a breadcrumb.');
 }
 
 const useStyles = makeStyles((theme: Theme) =>
diff --git a/docs/src/pages/components/breadcrumbs/IconBreadcrumbs.js b/docs/src/pages/components/breadcrumbs/IconBreadcrumbs.js
index bc2cd8cbf3f4cf..0f5ceb3a13646c 100644
--- a/docs/src/pages/components/breadcrumbs/IconBreadcrumbs.js
+++ b/docs/src/pages/components/breadcrumbs/IconBreadcrumbs.js
@@ -24,7 +24,7 @@ const useStyles = makeStyles(theme => ({
 
 function handleClick(event) {
   event.preventDefault();
-  alert('You clicked a breadcrumb.');
+  console.info('You clicked a breadcrumb.');
 }
 
 export default function IconBreadcrumbs() {
diff --git a/docs/src/pages/components/breadcrumbs/IconBreadcrumbs.tsx b/docs/src/pages/components/breadcrumbs/IconBreadcrumbs.tsx
index 3889c010ab731b..96d3a1e91c10fb 100644
--- a/docs/src/pages/components/breadcrumbs/IconBreadcrumbs.tsx
+++ b/docs/src/pages/components/breadcrumbs/IconBreadcrumbs.tsx
@@ -26,7 +26,7 @@ const useStyles = makeStyles((theme: Theme) =>
 
 function handleClick(event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) {
   event.preventDefault();
-  alert('You clicked a breadcrumb.');
+  console.info('You clicked a breadcrumb.');
 }
 
 export default function IconBreadcrumbs() {
diff --git a/docs/src/pages/components/breadcrumbs/SimpleBreadcrumbs.js b/docs/src/pages/components/breadcrumbs/SimpleBreadcrumbs.js
index 7360e52bed01a5..cd80a2d97732cd 100644
--- a/docs/src/pages/components/breadcrumbs/SimpleBreadcrumbs.js
+++ b/docs/src/pages/components/breadcrumbs/SimpleBreadcrumbs.js
@@ -17,7 +17,7 @@ const useStyles = makeStyles(theme => ({
 
 function handleClick(event) {
   event.preventDefault();
-  alert('You clicked a breadcrumb.');
+  console.info('You clicked a breadcrumb.');
 }
 
 export default function SimpleBreadcrumbs() {
diff --git a/docs/src/pages/components/breadcrumbs/SimpleBreadcrumbs.tsx b/docs/src/pages/components/breadcrumbs/SimpleBreadcrumbs.tsx
index f64b3062fee732..a11391c6a997a9 100644
--- a/docs/src/pages/components/breadcrumbs/SimpleBreadcrumbs.tsx
+++ b/docs/src/pages/components/breadcrumbs/SimpleBreadcrumbs.tsx
@@ -19,7 +19,7 @@ const useStyles = makeStyles((theme: Theme) =>
 
 function handleClick(event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) {
   event.preventDefault();
-  alert('You clicked a breadcrumb.');
+  console.info('You clicked a breadcrumb.');
 }
 
 export default function SimpleBreadcrumbs() {
diff --git a/docs/src/pages/components/buttons/SplitButton.js b/docs/src/pages/components/buttons/SplitButton.js
index fe004c35a187ad..b201c0ebdc7abd 100644
--- a/docs/src/pages/components/buttons/SplitButton.js
+++ b/docs/src/pages/components/buttons/SplitButton.js
@@ -18,7 +18,7 @@ export default function SplitButton() {
   const [selectedIndex, setSelectedIndex] = React.useState(1);
 
   const handleClick = () => {
-    alert(`You clicked ${options[selectedIndex]}`);
+    console.info(`You clicked ${options[selectedIndex]}`);
   };
 
   const handleMenuItemClick = (event, index) => {
diff --git a/docs/src/pages/components/buttons/SplitButton.tsx b/docs/src/pages/components/buttons/SplitButton.tsx
index f62006b14b5cb8..bf7d3d66c34e90 100644
--- a/docs/src/pages/components/buttons/SplitButton.tsx
+++ b/docs/src/pages/components/buttons/SplitButton.tsx
@@ -18,7 +18,7 @@ export default function SplitButton() {
   const [selectedIndex, setSelectedIndex] = React.useState(1);
 
   const handleClick = () => {
-    alert(`You clicked ${options[selectedIndex]}`);
+    console.info(`You clicked ${options[selectedIndex]}`);
   };
 
   const handleMenuItemClick = (
diff --git a/docs/src/pages/components/chips/Chips.js b/docs/src/pages/components/chips/Chips.js
index afc8f5b02ffd4f..5c45b3e770be6a 100644
--- a/docs/src/pages/components/chips/Chips.js
+++ b/docs/src/pages/components/chips/Chips.js
@@ -20,11 +20,11 @@ export default function Chips() {
   const classes = useStyles();
 
   const handleDelete = () => {
-    alert('You clicked the delete icon.');
+    console.info('You clicked the delete icon.');
   };
 
   const handleClick = () => {
-    alert('You clicked the Chip.');
+    console.info('You clicked the Chip.');
   };
 
   return (
diff --git a/docs/src/pages/components/chips/Chips.tsx b/docs/src/pages/components/chips/Chips.tsx
index 78248c4a512a24..b428ae30a298c5 100644
--- a/docs/src/pages/components/chips/Chips.tsx
+++ b/docs/src/pages/components/chips/Chips.tsx
@@ -22,11 +22,11 @@ export default function Chips() {
   const classes = useStyles();
 
   const handleDelete = () => {
-    alert('You clicked the delete icon.');
+    console.info('You clicked the delete icon.');
   };
 
   const handleClick = () => {
-    alert('You clicked the Chip.');
+    console.info('You clicked the Chip.');
   };
 
   return (
diff --git a/docs/src/pages/components/chips/ChipsArray.js b/docs/src/pages/components/chips/ChipsArray.js
index c9a67d26d1d4b2..148155c4d2ac5e 100644
--- a/docs/src/pages/components/chips/ChipsArray.js
+++ b/docs/src/pages/components/chips/ChipsArray.js
@@ -27,11 +27,6 @@ export default function ChipsArray() {
   ]);
 
   const handleDelete = chipToDelete => () => {
-    if (chipToDelete.label === 'React') {
-      alert('Why would you want to delete React?! :)');
-      return;
-    }
-
     setChipData(chips => chips.filter(chip => chip.key !== chipToDelete.key));
   };
 
@@ -49,7 +44,7 @@ export default function ChipsArray() {
             key={data.key}
             icon={icon}
             label={data.label}
-            onDelete={handleDelete(data)}
+            onDelete={data.label === 'React' ? undefined : handleDelete(data)}
             className={classes.chip}
           />
         );
diff --git a/docs/src/pages/components/chips/ChipsArray.tsx b/docs/src/pages/components/chips/ChipsArray.tsx
index 3ca8711eb16ea6..694c7462d8d76c 100644
--- a/docs/src/pages/components/chips/ChipsArray.tsx
+++ b/docs/src/pages/components/chips/ChipsArray.tsx
@@ -34,11 +34,6 @@ export default function ChipsArray() {
   ]);
 
   const handleDelete = (chipToDelete: ChipData) => () => {
-    if (chipToDelete.label === 'React') {
-      alert('Why would you want to delete React?! :)');
-      return;
-    }
-
     setChipData(chips => chips.filter(chip => chip.key !== chipToDelete.key));
   };
 
@@ -56,7 +51,7 @@ export default function ChipsArray() {
             key={data.key}
             icon={icon}
             label={data.label}
-            onDelete={handleDelete(data)}
+            onDelete={data.label === 'React' ? undefined : handleDelete(data)}
             className={classes.chip}
           />
         );
diff --git a/docs/src/pages/components/chips/ChipsPlayground.js b/docs/src/pages/components/chips/ChipsPlayground.js
index fef34f88886973..63de03f6156b4f 100644
--- a/docs/src/pages/components/chips/ChipsPlayground.js
+++ b/docs/src/pages/components/chips/ChipsPlayground.js
@@ -47,7 +47,7 @@ function ChipsPlayground(props) {
   };
 
   const handleDeleteExample = () => {
-    alert('You clicked the delete icon.');
+    console.info('You clicked the delete icon.');
   };
 
   const colorToCode = color !== 'default' ? `color="${color}" ` : '';
diff --git a/docs/src/pages/components/chips/OutlinedChips.js b/docs/src/pages/components/chips/OutlinedChips.js
index 8751e3ff8c35d9..06a8bd55d80ec6 100644
--- a/docs/src/pages/components/chips/OutlinedChips.js
+++ b/docs/src/pages/components/chips/OutlinedChips.js
@@ -20,11 +20,11 @@ export default function OutlinedChips() {
   const classes = useStyles();
 
   const handleDelete = () => {
-    alert('You clicked the delete icon.');
+    console.info('You clicked the delete icon.');
   };
 
   const handleClick = () => {
-    alert('You clicked the Chip.');
+    console.info('You clicked the Chip.');
   };
 
   return (
diff --git a/docs/src/pages/components/chips/OutlinedChips.tsx b/docs/src/pages/components/chips/OutlinedChips.tsx
index 31188fc4804f87..77651262c569c0 100644
--- a/docs/src/pages/components/chips/OutlinedChips.tsx
+++ b/docs/src/pages/components/chips/OutlinedChips.tsx
@@ -22,11 +22,11 @@ export default function OutlinedChips() {
   const classes = useStyles();
 
   const handleDelete = () => {
-    alert('You clicked the delete icon.');
+    console.info('You clicked the delete icon.');
   };
 
   const handleClick = () => {
-    alert('You clicked the Chip.');
+    console.info('You clicked the Chip.');
   };
 
   return (
diff --git a/docs/src/pages/components/chips/SmallChips.js b/docs/src/pages/components/chips/SmallChips.js
index 17b591e39101c7..3d3d27960c4e97 100644
--- a/docs/src/pages/components/chips/SmallChips.js
+++ b/docs/src/pages/components/chips/SmallChips.js
@@ -20,11 +20,11 @@ export default function SmallChips() {
   const classes = useStyles();
 
   const handleDelete = () => {
-    alert('You clicked the delete icon.');
+    console.info('You clicked the delete icon.');
   };
 
   const handleClick = () => {
-    alert('You clicked the Chip.');
+    console.info('You clicked the Chip.');
   };
 
   return (
diff --git a/docs/src/pages/components/chips/SmallChips.tsx b/docs/src/pages/components/chips/SmallChips.tsx
index 6cb168a57698b5..5b498dca873423 100644
--- a/docs/src/pages/components/chips/SmallChips.tsx
+++ b/docs/src/pages/components/chips/SmallChips.tsx
@@ -22,11 +22,11 @@ export default function SmallChips() {
   const classes = useStyles();
 
   const handleDelete = () => {
-    alert('You clicked the delete icon.');
+    console.info('You clicked the delete icon.');
   };
 
   const handleClick = () => {
-    alert('You clicked the Chip.');
+    console.info('You clicked the Chip.');
   };
 
   return (
diff --git a/docs/src/pages/components/chips/SmallOutlinedChips.js b/docs/src/pages/components/chips/SmallOutlinedChips.js
index ff4c5966a36c3c..82a5f8594eae56 100644
--- a/docs/src/pages/components/chips/SmallOutlinedChips.js
+++ b/docs/src/pages/components/chips/SmallOutlinedChips.js
@@ -20,11 +20,11 @@ export default function SmallOutlinedChips() {
   const classes = useStyles();
 
   const handleDelete = () => {
-    alert('You clicked the delete icon.');
+    console.info('You clicked the delete icon.');
   };
 
   const handleClick = () => {
-    alert('You clicked the Chip.');
+    console.info('You clicked the Chip.');
   };
 
   return (
diff --git a/docs/src/pages/components/chips/SmallOutlinedChips.tsx b/docs/src/pages/components/chips/SmallOutlinedChips.tsx
index d149d887fe0633..bd39092ff1b828 100644
--- a/docs/src/pages/components/chips/SmallOutlinedChips.tsx
+++ b/docs/src/pages/components/chips/SmallOutlinedChips.tsx
@@ -22,11 +22,11 @@ export default function SmallOutlinedChips() {
   const classes = useStyles();
 
   const handleDelete = () => {
-    alert('You clicked the delete icon.');
+    console.info('You clicked the delete icon.');
   };
 
   const handleClick = () => {
-    alert('You clicked the Chip.');
+    console.info('You clicked the Chip.');
   };
 
   return (
diff --git a/docs/src/pages/components/links/ButtonLink.js b/docs/src/pages/components/links/ButtonLink.js
index ffb55d90ee12a7..c5cbafa6031ea5 100644
--- a/docs/src/pages/components/links/ButtonLink.js
+++ b/docs/src/pages/components/links/ButtonLink.js
@@ -8,7 +8,7 @@ export default function ButtonLink() {
       component="button"
       variant="body2"
       onClick={() => {
-        alert("I'm a button.");
+        console.info("I'm a button.");
       }}
     >
       Button Link
diff --git a/docs/src/pages/components/links/ButtonLink.tsx b/docs/src/pages/components/links/ButtonLink.tsx
index ffb55d90ee12a7..c5cbafa6031ea5 100644
--- a/docs/src/pages/components/links/ButtonLink.tsx
+++ b/docs/src/pages/components/links/ButtonLink.tsx
@@ -8,7 +8,7 @@ export default function ButtonLink() {
       component="button"
       variant="body2"
       onClick={() => {
-        alert("I'm a button.");
+        console.info("I'm a button.");
       }}
     >
       Button Link