Wizard and stepper

Wizard action bar

The sticky bar under a flow: Back on the left, the save state (saved, unsaved, saving, failed) in the middle, and the one primary on the right. Phone: full width, 48px buttons, tab bar hidden.

Live specimen

Lifted from the approved family page at build time; interact with it.

Sticky action bar

Pinned to the bottom of the step. Save state on the left; on the right one primary action, with Back and the quieter actions before it.

Saved

Saved 2 min ago

Unsaved changes

Unsaved changes

Saving

Saving draft…

Save failed

Not saved. The admin did not answer.

Last step: one publish moment

Saved Today 14:32

Primary action states

default
hover
focus
disabled
loading
Uses.wz-bar.wz-save.btn-primary.btn-secondary.btn-tertiaryposition:sticky--warning--success

from families/wizard-stepper/#action-bar