1 files changed, 10 insertions, 4 deletions
diff --git a/app/assets/javascripts/create_cluster/eks_cluster/components/service_credentials_form.vue b/app/assets/javascripts/create_cluster/eks_cluster/components/service_credentials_form.vue
index a3f76241bf2..f104eb61e41 100644
--- a/app/assets/javascripts/create_cluster/eks_cluster/components/service_credentials_form.vue
+++ b/app/assets/javascripts/create_cluster/eks_cluster/components/service_credentials_form.vue
@@ -1,11 +1,11 @@
 <script>
 /* eslint-disable vue/no-v-html */
-import { GlButton, GlFormGroup, GlFormInput, GlIcon, GlLink, GlSprintf } from '@gitlab/ui';
+import { GlButton, GlFormGroup, GlFormInput, GlIcon, GlLink, GlSprintf, GlAlert } from '@gitlab/ui';
 import { escape } from 'lodash';
 import { mapState, mapActions } from 'vuex';
-import { DEFAULT_REGION } from '../constants';
 import { sprintf, s__, __ } from '~/locale';
 import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
+import { DEFAULT_REGION } from '../constants';
 
 export default {
   components: {
@@ -16,6 +16,7 @@ export default {
     GlLink,
     GlSprintf,
     ClipboardButton,
+    GlAlert,
   },
   props: {
     accountAndExternalIdsHelpPath: {
@@ -105,9 +106,14 @@ export default {
         )
       }}
     </p>
-    <div v-if="createRoleError" class="js-invalid-credentials bs-callout bs-callout-danger">
+    <gl-alert
+      v-if="createRoleError"
+      class="js-invalid-credentials gl-mb-5"
+      variant="danger"
+      :dismissible="false"
+    >
       {{ createRoleError }}
-    </div>
+    </gl-alert>
     <div class="form-row">
       <div class="form-group col-md-6">
         <label for="gitlab-account-id">{{ __('Account ID') }}</label>