Wizard Nav

Back and Next navigation controls for use inside a wizard.

Preview · Wizard Nav

Code

HTML · @primus/ui-core

<div style="display:flex;justify-content:space-between;align-items:center;padding:0.75rem;border-top:1px solid var(--border)">
  <button data-variant="secondary" class="small">← Back</button>
  <button class="small">Next →</button>
</div>

React

import { PrimusWizardNav } from 'primus-react-ui';

<PrimusWizardNav backLabel="Back" nextLabel="Next"
  onBack={() => setStep(s => s - 1)}
  onNext={() => setStep(s => s + 1)} />

Angular

<primus-wizard-nav backLabel="Back" nextLabel="Next"
  (back)="onBack()" (next)="onNext()">
</primus-wizard-nav>

Props

Prop	Type	Default	Description
backLabel	string	'Back'	Back label
nextLabel	string	'Next'	Next label

Version history

See the Changelog for version history and breaking changes.