diff --git a/app/assets/javascripts/api/user_api.js b/app/assets/javascripts/api/user_api.js
index c743b18d572a43424fd24869ea2ef1346b8d52cf..369abe95d49148d02bad927d57d1d87625d925a0 100644
--- a/app/assets/javascripts/api/user_api.js
+++ b/app/assets/javascripts/api/user_api.js
@@ -1,5 +1,5 @@
 import { DEFAULT_PER_PAGE } from '~/api';
-import createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import { __ } from '~/locale';
 import axios from '../lib/utils/axios_utils';
 import { buildApiUrl } from './api_utils';
@@ -55,7 +55,7 @@ export function getUserProjects(userId, query, options, callback) {
     })
     .then(({ data }) => callback(data))
     .catch(() =>
-      createFlash({
+      createAlert({
         message: __('Something went wrong while fetching projects'),
       }),
     );
diff --git a/app/assets/javascripts/awards_handler.js b/app/assets/javascripts/awards_handler.js
index a3ffb4df7b77558c2b4d11097f6bc491927aae78..9ab1d6bfd802e5cadfba19788a1d074a2d4b03a3 100644
--- a/app/assets/javascripts/awards_handler.js
+++ b/app/assets/javascripts/awards_handler.js
@@ -7,7 +7,7 @@ import { getEmojiScoreWithIntent } from '~/emoji/utils';
 import { getCookie, setCookie, scrollToElement } from '~/lib/utils/common_utils';
 import * as Emoji from '~/emoji';
 import { dispose, fixTitle } from '~/tooltips';
-import createFlash from './flash';
+import { createAlert } from '~/flash';
 import axios from './lib/utils/axios_utils';
 import { isInVueNoteablePage } from './lib/utils/dom_utils';
 import { __ } from './locale';
@@ -491,7 +491,7 @@ export class AwardsHandler {
         }
       })
       .catch(() =>
-        createFlash({
+        createAlert({
           message: __('Something went wrong on our end.'),
         }),
       );
diff --git a/app/assets/javascripts/badges/components/badge_form.vue b/app/assets/javascripts/badges/components/badge_form.vue
index d1570e16639f393342643b397e0ba959dd30e386..f68666f8a0ca1b4b1f95469d75c75a80a7572a54 100644
--- a/app/assets/javascripts/badges/components/badge_form.vue
+++ b/app/assets/javascripts/badges/components/badge_form.vue
@@ -2,7 +2,7 @@
 import { GlLoadingIcon, GlFormInput, GlFormGroup, GlButton, GlSafeHtmlDirective } from '@gitlab/ui';
 import { escape, debounce } from 'lodash';
 import { mapActions, mapState } from 'vuex';
-import createFlash from '~/flash';
+import { createAlert, VARIANT_INFO } from '~/flash';
 import { s__, sprintf } from '~/locale';
 import createEmptyBadge from '../empty_badge';
 import Badge from './badge.vue';
@@ -136,14 +136,14 @@ export default {
       if (this.isEditing) {
         return this.saveBadge()
           .then(() => {
-            createFlash({
+            createAlert({
               message: s__('Badges|Badge saved.'),
-              type: 'notice',
+              variant: VARIANT_INFO,
             });
             this.wasValidated = false;
           })
           .catch((error) => {
-            createFlash({
+            createAlert({
               message: s__(
                 'Badges|Saving the badge failed, please check the entered URLs and try again.',
               ),
@@ -154,14 +154,14 @@ export default {
 
       return this.addBadge()
         .then(() => {
-          createFlash({
+          createAlert({
             message: s__('Badges|New badge added.'),
-            type: 'notice',
+            variant: VARIANT_INFO,
           });
           this.wasValidated = false;
         })
         .catch((error) => {
-          createFlash({
+          createAlert({
             message: s__(
               'Badges|Adding the badge failed, please check the entered URLs and try again.',
             ),
diff --git a/app/assets/javascripts/badges/components/badge_settings.vue b/app/assets/javascripts/badges/components/badge_settings.vue
index 0303930de5d6d6c11f93dc29f71d62079f48ac83..a7a21d65475b9ca4011b1a859c911f2674e7b8ab 100644
--- a/app/assets/javascripts/badges/components/badge_settings.vue
+++ b/app/assets/javascripts/badges/components/badge_settings.vue
@@ -1,7 +1,7 @@
 <script>
 import { GlSprintf, GlModal } from '@gitlab/ui';
 import { mapState, mapActions } from 'vuex';
-import createFlash from '~/flash';
+import { createAlert, VARIANT_INFO } from '~/flash';
 import { __, s__ } from '~/locale';
 import Badge from './badge.vue';
 import BadgeForm from './badge_form.vue';
@@ -40,13 +40,13 @@ export default {
     onSubmitModal() {
       this.deleteBadge(this.badgeInModal)
         .then(() => {
-          createFlash({
+          createAlert({
             message: s__('Badges|The badge was deleted.'),
-            type: 'notice',
+            variant: VARIANT_INFO,
           });
         })
         .catch((error) => {
-          createFlash({
+          createAlert({
             message: s__('Badges|Deleting the badge failed, please try again.'),
           });
           throw error;
diff --git a/app/assets/javascripts/batch_comments/stores/modules/batch_comments/actions.js b/app/assets/javascripts/batch_comments/stores/modules/batch_comments/actions.js
index 2b0aaa74e8397e69430d7ffc403bb5db224d83c0..feac6f10b1e82f64a65da8ba68c3f9116a94aa8b 100644
--- a/app/assets/javascripts/batch_comments/stores/modules/batch_comments/actions.js
+++ b/app/assets/javascripts/batch_comments/stores/modules/batch_comments/actions.js
@@ -1,5 +1,5 @@
 import { isEmpty } from 'lodash';
-import createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import { scrollToElement } from '~/lib/utils/common_utils';
 import { __ } from '~/locale';
 import { CHANGES_TAB, DISCUSSION_TAB, SHOW_TAB } from '../../../constants';
@@ -18,7 +18,7 @@ export const addDraftToDiscussion = ({ commit }, { endpoint, data }) =>
       return res;
     })
     .catch(() => {
-      createFlash({
+      createAlert({
         message: __('An error occurred adding a draft to the thread.'),
       });
     });
@@ -32,7 +32,7 @@ export const createNewDraft = ({ commit }, { endpoint, data }) =>
       return res;
     })
     .catch(() => {
-      createFlash({
+      createAlert({
         message: __('An error occurred adding a new draft.'),
       });
     });
@@ -44,7 +44,7 @@ export const deleteDraft = ({ commit, getters }, draft) =>
       commit(types.DELETE_DRAFT, draft.id);
     })
     .catch(() =>
-      createFlash({
+      createAlert({
         message: __('An error occurred while deleting the comment'),
       }),
     );
@@ -62,7 +62,7 @@ export const fetchDrafts = ({ commit, getters, state, dispatch }) =>
       });
     })
     .catch(() =>
-      createFlash({
+      createAlert({
         message: __('An error occurred while fetching pending comments'),
       }),
     );
@@ -122,7 +122,7 @@ export const updateDraft = (
     .then((data) => commit(types.RECEIVE_DRAFT_UPDATE_SUCCESS, data))
     .then(callback)
     .catch(() =>
-      createFlash({
+      createAlert({
         message: __('An error occurred while updating the comment'),
       }),
     );
diff --git a/app/assets/javascripts/behaviors/preview_markdown.js b/app/assets/javascripts/behaviors/preview_markdown.js
index 679940d1317ece66499eb743d9bda651f68a26c0..68f5180cc03716209fc09e552d8608a5cbb9808d 100644
--- a/app/assets/javascripts/behaviors/preview_markdown.js
+++ b/app/assets/javascripts/behaviors/preview_markdown.js
@@ -1,7 +1,7 @@
 /* eslint-disable func-names */
 
 import $ from 'jquery';
-import createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { __ } from '~/locale';
 
@@ -80,7 +80,7 @@ MarkdownPreview.prototype.fetchMarkdownPreview = function (text, url, success) {
       success(data);
     })
     .catch(() =>
-      createFlash({
+      createAlert({
         message: __('An error occurred while fetching Markdown preview'),
       }),
     );
diff --git a/app/assets/javascripts/blob/file_template_mediator.js b/app/assets/javascripts/blob/file_template_mediator.js
index 991f98c89e729f30f76c58b80e3b987e01f71d1f..adc2649e5df0ce67e1a771ebdf6506440a954311 100644
--- a/app/assets/javascripts/blob/file_template_mediator.js
+++ b/app/assets/javascripts/blob/file_template_mediator.js
@@ -2,7 +2,7 @@ import $ from 'jquery';
 
 import Api from '~/api';
 import initPopover from '~/blob/suggest_gitlab_ci_yml';
-import createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import { __ } from '~/locale';
 import toast from '~/vue_shared/plugins/global_toast';
 
@@ -155,7 +155,7 @@ export default class FileTemplateMediator {
         }
       })
       .catch((err) =>
-        createFlash({
+        createAlert({
           message: __(`An error occurred while fetching the template: ${err}`),
         }),
       );
diff --git a/app/assets/javascripts/blob/openapi/index.js b/app/assets/javascripts/blob/openapi/index.js
index 4c497db984257f716ec13cce589718b2e42407d0..44b75cc3e68c144283a4035b687b28d147e65e56 100644
--- a/app/assets/javascripts/blob/openapi/index.js
+++ b/app/assets/javascripts/blob/openapi/index.js
@@ -1,5 +1,5 @@
 import { SwaggerUIBundle } from 'swagger-ui-dist';
-import createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import { __ } from '~/locale';
 
 export default () => {
@@ -15,7 +15,7 @@ export default () => {
       });
     })
     .catch((error) => {
-      createFlash({
+      createAlert({
         message: __('Something went wrong while initializing the OpenAPI viewer'),
       });
       throw error;
diff --git a/app/assets/javascripts/blob/viewer/index.js b/app/assets/javascripts/blob/viewer/index.js
index 5ca3f131d9964a9fe62024f21bab1e61789c8e05..8d323c335d3c32c4211406b9a646e6ac2c64fe06 100644
--- a/app/assets/javascripts/blob/viewer/index.js
+++ b/app/assets/javascripts/blob/viewer/index.js
@@ -1,6 +1,6 @@
 import $ from 'jquery';
 import '~/behaviors/markdown/render_gfm';
-import createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import { __ } from '~/locale';
 import {
   REPO_BLOB_LOAD_VIEWER_START,
@@ -69,7 +69,7 @@ export const handleBlobRichViewer = (viewer, type) => {
   loadRichBlobViewer(type)
     .then((module) => module?.default(viewer))
     .catch((error) => {
-      createFlash({
+      createAlert({
         message: __('Error loading file viewer.'),
       });
       throw error;
@@ -221,7 +221,7 @@ export class BlobViewer {
         });
       })
       .catch(() =>
-        createFlash({
+        createAlert({
           message: __('Error loading viewer'),
         }),
       );
diff --git a/app/assets/javascripts/blob_edit/blob_bundle.js b/app/assets/javascripts/blob_edit/blob_bundle.js
index d73e1cc43b061a8511c04c69d6084c48e4c70238..1c9c99dcc2f899e355b85d3e7be164c2994bd106 100644
--- a/app/assets/javascripts/blob_edit/blob_bundle.js
+++ b/app/assets/javascripts/blob_edit/blob_bundle.js
@@ -2,7 +2,7 @@
 
 import $ from 'jquery';
 import initPopover from '~/blob/suggest_gitlab_ci_yml';
-import createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import { disableButtonIfEmptyField, setCookie } from '~/lib/utils/common_utils';
 import Tracking from '~/tracking';
 import BlobFileDropzone from '../blob/blob_file_dropzone';
@@ -79,7 +79,7 @@ export default () => {
         initPopovers();
       })
       .catch((e) =>
-        createFlash({
+        createAlert({
           message: e,
         }),
       );
diff --git a/app/assets/javascripts/blob_edit/edit_blob.js b/app/assets/javascripts/blob_edit/edit_blob.js
index 2ee2e199358079ecd7d4b66bc10f62450b644dfe..78e3f9341833b08b92b79878e4ffcb8f5d5a4b3e 100644
--- a/app/assets/javascripts/blob_edit/edit_blob.js
+++ b/app/assets/javascripts/blob_edit/edit_blob.js
@@ -3,7 +3,7 @@ import { SourceEditorExtension } from '~/editor/extensions/source_editor_extensi
 import { FileTemplateExtension } from '~/editor/extensions/source_editor_file_template_ext';
 import { ToolbarExtension } from '~/editor/extensions/source_editor_toolbar_ext';
 import SourceEditor from '~/editor/source_editor';
-import createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { addEditorMarkdownListeners } from '~/lib/utils/text_markdown';
 import { insertFinalNewline } from '~/lib/utils/text_utility';
@@ -44,7 +44,7 @@ export default class EditBlob {
         },
       ]);
     } catch (e) {
-      createFlash({
+      createAlert({
         message: `${BLOB_EDITOR_ERROR}: ${e}`,
       });
     }
@@ -130,7 +130,7 @@ export default class EditBlob {
           currentPane.renderGFM();
         })
         .catch(() =>
-          createFlash({
+          createAlert({
             message: BLOB_PREVIEW_ERROR,
           }),
         );