PxStepper

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 { PxStepper } from 'praxis-vue-ui'
import { ref } from 'vue'

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

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

With Save Button (Last Step)

With Save

<PxStepper
  :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

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

API Reference

Prop	Type	Default	Description
showPrevious	boolean	true	Whether to show the Previous button
canProceed	boolean	true	Whether the Next/Proceed button is enabled
loading	boolean	false	Loading state - disables buttons and shows spinner
nextLabel	string	"Next"	Label for the Next button
previousLabel	string	"Previous"	Label for the Previous button
loadingLabel	string	"Processing..."	Loading text shown when loading is true
showSave	boolean	false	Whether to show a Save button alongside Next
saveLabel	string	"Save"	Label for the Save button
saveLoadingLabel	string	"Saving..."	Loading text for Save button
hasPermission	boolean	true	If the user has permission to edit/save