molecule · stable · extension · since 2026-09
WizardFooter
Purpose
The foot of a wizard: back, forward, and finish on the last element, with the theme’s counters on the left.
When to use, when not
Use it in every wizard’s footer slot. Not for a dialog’s actions, which are the Dialog’s.
Anatomy
- The counters, on the left, given by the wizard.
- Précédent, then Suivant, or Terminer on the last element.
Props
| Name | Type | Default | What it does |
|---|---|---|---|
last? | boolean | false | On the last element, the forward button finishes instead. |
onprev? | (() => void) | undefined | ||
onnext? | (() => void) | undefined | ||
onfinish? | (() => void) | undefined | ||
prevDisabled? | boolean | false | |
finishReason? | string | undefined | Why the finish is unavailable, when it is: shown next to the button. | |
prevLabel? | string | 'Précédent' | |
nextLabel? | string | 'Suivant' | |
finishLabel? | string | 'Terminer' | |
class? | string | '' | Layout classes only. |
counters? | Snippet | The theme's counters, on the left. |
States
In the middle of a list, on the first element, on the last, and a finish that is unavailable with its reason.
blocked
A finish that is unavailable says why, next to the button.
Light
Dark
320 px, light
320 px, dark
216 px, light
Forced colours, captured
first
On the first element, Précédent is unavailable.
Light
Dark
320 px, light
320 px, dark
216 px, light
Forced colours, captured
last
On the last element, Terminer replaces Suivant.
Light
Dark
320 px, light
320 px, dark
216 px, light
Forced colours, captured
middle
Light
Dark
320 px, light
320 px, dark
216 px, light
Forced colours, captured
Accessibility contract
- Role and name: three buttons, named by their words;
data-actionsays which for the walks. - Keyboard, focus: Tab reaches them in reading order; Enter on the screen advances through the page’s shortcut listener, and the hint on the button says so.
- Live regions: none.
Content rules
French. Précédent, Suivant, Terminer; the reason of an unavailable finish is one sentence saying what is missing.
Do and don’t
- Do show Terminer instead of Suivant on the last element, never both.
- Do not disable Suivant to force an answer: an element can be skipped and come back through the jump list.
Examples
<WizardFooter last={index === total - 1} prevDisabled={index === 0} onprev={prev} onnext={next} onfinish={finish}>
{#snippet counters()}<StatusCounters counts={counts} />{/snippet}
</WizardFooter>Surfaces
- Extension: every inventory wizard.
Related
WizardFrame, Button, StatusCounters.
Decisions
- 2026-10-07: the label of a nav button never wraps; the row wraps instead.
white-space: nowrapis set here rather than on Button, whose link variant is written inside a sentence and must break with it. - 2026-09-26: Terminer replaces Suivant on the last element, as the old foot did; the reason of an unavailable finish is written next to the button through Button’s
reason.
Criteria held by construction
- 7.1, Chaque script est-il, si nécessaire, compatible avec les technologies d'assistance ?
Real buttons, one disabled with a reason when the wizard cannot finish, never a div with a click handler. - 12.10, Dans chaque page web, les raccourcis clavier n'utilisant qu'une seule touche sont-ils contrôlables par l'utilisateur ?
The Enter shortcut that advances is printed on the button it drives.
Tokens it reads
- Spacing:
--rl-space-2,--rl-space-3