diff --git a/assets/js/src/context/index.jsx b/assets/js/src/context/index.jsx
index 3cbc8ad93c..3c48722cfe 100644
--- a/assets/js/src/context/index.jsx
+++ b/assets/js/src/context/index.jsx
@@ -2,6 +2,7 @@ import React from 'react';
 import getFeaturesContext from './getFeaturesContext.jsx';
 import getSegmentsContext from './getSegmentsContext.jsx';
 import getUsersContext from './getUsersContext.jsx';
+import useNotices from './useNotices.jsx';
 
 /**
  * Builds the value of the global context.
@@ -12,7 +13,10 @@ export function useGlobalContextValue(data) {
   const features = getFeaturesContext(data);
   const segments = getSegmentsContext(data);
   const users = getUsersContext(data);
-  return { features, segments, users };
+  const notices = useNotices();
+  return {
+    features, segments, users, notices,
+  };
 }
 
 export const GlobalContext = React.createContext({});
diff --git a/assets/js/src/context/useNotices.jsx b/assets/js/src/context/useNotices.jsx
new file mode 100644
index 0000000000..1e350a39f1
--- /dev/null
+++ b/assets/js/src/context/useNotices.jsx
@@ -0,0 +1,29 @@
+import React from 'react';
+
+export default () => {
+  const [items, setItems] = React.useState([]);
+  const [nextId, setNextId] = React.useState(1);
+
+  const getNextId = () => {
+    setNextId((x) => x + 1);
+    return nextId;
+  };
+
+  const add = (item) => {
+    setItems((xs) => [...xs, { ...item, id: item.id || getNextId() }]);
+  };
+
+  const remove = (id) => {
+    setItems((xs) => xs.filter((x) => x.id !== id));
+  };
+
+  const success = (content, props = {}) => add({ ...props, type: 'success', children: content });
+  const info = (content, props = {}) => add({ ...props, type: 'info', children: content });
+  const warning = (content, props = {}) => add({ ...props, type: 'warning', children: content });
+  const error = (content, props = {}) => add({ ...props, type: 'error', children: content });
+
+  return {
+    items, success, info, warning, error, remove,
+  };
+};
+