1 files changed, 54 insertions, 0 deletions
diff --git a/app/assets/javascripts/pipeline_wizard/components/step_nav.vue b/app/assets/javascripts/pipeline_wizard/components/step_nav.vue
new file mode 100644
index 00000000000..8f9198855c6
--- /dev/null
+++ b/app/assets/javascripts/pipeline_wizard/components/step_nav.vue
@@ -0,0 +1,54 @@
+<script>
+import { GlButton } from '@gitlab/ui';
+
+export default {
+  name: 'StepNav',
+  components: {
+    GlButton,
+  },
+  props: {
+    showBackButton: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    showNextButton: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    nextButtonEnabled: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <slot name="before"></slot>
+    <gl-button
+      v-if="showBackButton"
+      category="secondary"
+      data-testid="back-button"
+      @click="$emit('back')"
+    >
+      {{ __('Back') }}
+    </gl-button>
+    <gl-button
+      v-if="showNextButton"
+      :disabled="!nextButtonEnabled"
+      category="primary"
+      data-testid="next-button"
+      variant="confirm"
+      @click="$emit('next')"
+    >
+      {{ __('Next') }}
+    </gl-button>
+    <slot name="after"></slot>
+  </div>
+</template>
+
+<style scoped></style>