PrevNext

Purpose

The pair between two pages: the one before and the one after, as a small navigation landmark. Each step says its direction in a word and its destination in a label; a link with an address, a button with an action; a missing side is absent.

When to use, when not

Use it at the foot of an article, a sheet, a part of a report, or between two elements of a walk. Not for a numbered list of pages, which is Pagination; not for the path to the page, which is Breadcrumb; the wizard’s foot with its counters is WizardFooter.

Anatomy

1. The landmark.
2. The step before, at the left: the word with its arrow, the label.
3. The step after, at the right.

Props

Props of PrevNext

Name	Type	Default	What it does
prev?	Step | undefined		The step before; absent at the first page.
next?	Step | undefined		The step after; absent at the last page.
label?	string	'Pages voisines'	The landmark's name. Two pairs on one page need two names.
prevWord?	string	'Précédent'	The word of the step before.
nextWord?	string	'Suivant'	The word of the step after.
class?	string	''	Layout classes only.

States

Both sides, the first page, the last page, and buttons in a walk.

both

Between two sheets: two links, each with its word and its destination.

Light

Dark

320 px, light

320 px, dark

216 px, light

Forced colours, captured

buttons

In a wizard, between two elements: buttons, since the step is an action, with the words of the walk.

Light

Dark

320 px, light

320 px, dark

216 px, light

Forced colours, captured

first

The first page has no previous one: the side is absent, the next keeps its place on the right.

Light

Dark

320 px, light

320 px, dark

216 px, light

Forced colours, captured

last

The last page.

Light

Dark

320 px, light

320 px, dark

216 px, light

Forced colours, captured

Accessibility contract

• Role and name: nav named by label; each step a link named by its word and its label, or a button.
• Keyboard, focus: two Tab stops at most; Enter follows, Enter or Space activates a button.
• Live regions: none. A walk that moves in place announces where it landed.

Content rules

French. The words are “Précédent” and “Suivant”, or the caller’s (“Élément précédent”); the label is the destination’s name, verbatim.

Do and don’t

• Do name the landmark for what it links (“Fiches voisines”), and differently from another pair on the page.
• Do not render a greyed side; give nothing.
• Do not write “Page précédente” twice, in the word and in the label.

Examples

<PrevNext prev={before && { label: before.title, href: before.href }} next={after && { label: after.title, href: after.href }} label="Fiches voisines" />

Surfaces

• Site: the foot of every sheet and article.
• App: between the parts of a report.
• Extension: between two elements of a wizard, when the footer is not enough.

Related

Pagination, Breadcrumb, WizardFooter, Link.

Decisions

• 2026-09-26: a grid of two columns with the next step pinned to the second: the eye finds “Suivant” at the right whether or not there is a previous.

Criteria held by construction

• 12.6, Les zones de regroupement de contenus présentes dans plusieurs pages web (zones d'en-tête, de navigation principale, de contenu principal, de pied de page et de moteur de recherche) peuvent-elles être atteintes ou évitées ?
  A navigation landmark named for what it links, so a reader finds it in the landmark list and skips it.
• 6.1, Chaque lien est-il explicite ?
  Each link's text says its direction and its destination: 'Précédent, Le contraste des textes'.
• 7.3, Chaque script est-il contrôlable par le clavier et par tout dispositif de pointage ?
  A link when there is an address, a native button when the step is an action; a missing side is absent, never a disabled control.

Tokens it reads

• Colour: --rl-action, --rl-ink, --rl-ink-soft, --rl-line, --rl-line-strong, --rl-surface
• Typography: --rl-weight-bold, --rl-text-sm, --rl-text-xs, --rl-tracking-label
• Spacing: --rl-space-1, --rl-space-3, --rl-space-4
• Layout: --rl-radius, --rl-border

Seen in patterns

• Wizard step