VersionPager
StablePrevious and next buttons with a count like 1/3, for the versions of one message.
Also known as branch picker, response versions, regenerate pager, pagination
Install with npm install @tattva/ui (setup), or copy the code from the kit in Downloads.
Default
<VersionPager total={3} />Starts on the latest version.
When to use it
Steps through the versions of one message, made by editing it or asking again. The count is small so the message itself stays the focus.
Made of: Previous button · Count · Next button · Edited label · Branch button
Use it for
- A message that was edited, so the earlier wording is still there to look at.
- A reply that was written again, so people can compare the attempts.
- Starting a new chat from one version, with the branch button.
Not for
- Going back to an earlier point in a long piece of work: use CheckpointList.
- Switching between an AI suggestion and the person's own edit: use RevertToggle.
- A list of saved versions of a document or design: use VersionHistory.
Do and avoid
Do
- Keep the pager next to the message it belongs to.
- Change the message text with the version so the count and text match.
- Offer a branch button only if your product can start a separate chat.
Avoid
- Do not use it for unrelated messages. It is for versions of one message.
- Do not hide the count. The position is the point of the control.
- Do not move the cursor when the version changes. People should be able to keep clicking.
On a phone
- The pager wraps onto a second line if the edited label and branch button do not fit.
- The previous and next buttons keep their size and have a 44px tap area on a touch screen.
- Tapping steps one version at a time; there is no swipe, so keep the pager next to the message it changes.
Seen in products
- ChatGPT shipped Branch in new chat on web in September 2025. Forking at a message starts a new independent thread and leaves the original intact.
- ChatGPT shows edits and regenerations as sibling versions in a 1/3 style pager (secondary source).
- Character.ai lets people swipe for alternate replies, 30 per message on free and 100 on C.AI+, and Rewind to here deletes everything after a chosen message.
Properties
| Prop | Type | Default | Description |
|---|---|---|---|
| totalrequired | number | none | Number of sibling versions. |
| current | number | none | Controlled current version, 1-based. |
| defaultCurrent | number | total | Starting version in uncontrolled mode. |
| onChange | (version: number) => void | none | Called with the new 1-based version. |
| edited | boolean | none | Shows the edited label. |
| editedLabel | string | "Edited" | Text of the edited label. |
| branchAction | ReactNode | none | Slot for an action such as Branch from here. |
| announce | (current: number, total: number) => string | Version N of M | Builds the polite announcement. |
| label | string | "Message versions" | Accessible name for the group. |
| className | string | none | Extra classes on the wrapper. |
"Show code under the preview gives the code for the example on the stage."
In Figma
In Figma, one VersionPager switches all of this from its properties panel, across 2 variants. Each property sets the React prop beside it, so design and code use the same names.
| Figma property | React | Values |
|---|---|---|
| Edited | edited | On or off |
Tokens
Change one of these and every part that uses it follows.
--fg-muted--surface-sunken--border--radius-control
Built in
- Previous and next are named buttons that turn off at the first and last version.
- After each step, screen readers hear the new position, such as "Version 2 of 3".
- The visible count is hidden from screen readers so it is not read twice.
- The whole control is a group named "Message versions".
What you need to do
- Change the message text when the version changes, so what people hear matches the count.
- Place the pager right after the message it belongs to, so screen reader users know which message it changes.
Built toward WCAG 2.2 AA and checked automatically; no independent audit yet. Read the accessibility guide