StepNavigation

Navigation button row for multi-step forms. Provides Previous, Next and optional Save buttons with loading state, permission gating, and fully customizable labels.

Basic Usage

Demo

Step 1 of 3

<script setup>
import { StepNavigation } from 'praxis-vue-ui'
import { ref } from 'vue'

const step = ref(1)
const next = () => step.value++
const prev = () => step.value--
</script>

<template>
  <StepNavigation
    :show-previous="step > 1"
    :can-proceed="true"
    next-label="Next: Contact Info"
    @previous="prev"
    @next="next"
  />
</template>

With Save Button (Last Step)

With Save

<StepNavigation
  :show-previous="true"
  :show-save="true"
  :can-proceed="true"
  :loading="isSaving"
  next-label="Submit"
  save-label="Save Draft"
  @previous="prev"
  @next="submit"
  @save="saveDraft"
/>

Disabled (No Permission)

No Permission

<StepNavigation
  :show-previous="true"
  :can-proceed="true"
  :has-permission="false"
  :show-save="true"
  @previous="prev"
  @next="next"
/>

Props

Props

Prop	Type	Default	Description
showPrevious	boolean	true	Whether to render the Previous button. Set to false on the first step.
canProceed	boolean	true	Enables or disables the Next button. Use for step-level validation.
loading	boolean	false	Puts all buttons in loading state. Shows spinner and loading labels.
nextLabel	string	'Next'	Label text for the Next/Proceed button.
previousLabel	string	'Previous'	Label text for the Previous button.
loadingLabel	string	'Processing...'	Text shown inside Next button while loading is true.
showSave	boolean	false	Show the optional Save button alongside Next. Useful on the last step.
saveLabel	string	'Save'	Label for the Save button.
saveLoadingLabel	string	'Saving...'	Text shown inside Save button while loading is true.
hasPermission	boolean	true	When false, disables the Save button (and Next on the last step). Use for role-based access control.

Emits

Emits

Event	Payload	Description
previous	void	Emitted when the Previous button is clicked.
next	void	Emitted when the Next button is clicked and not disabled.
save	void	Emitted when the Save button is clicked and not disabled.