RevertToggle

Stable

Lets people flip between the AI's suggestion and their own edit, with a way back to the original.

Also known as undo, restore previous, before after toggle

Install with npm install @tattva/ui (setup), or copy the code from the kit in Downloads.

Thanks for your patience. The fix ships Friday.

<RevertToggle
  aiValue="Thank you for waiting. We expect to ship the fix on Friday."
  userValue={edit}
  onRevert={() => setEdit(undefined)}
/>

Reverting drops the edit here, and the switch goes away.

Usage Code Design Accessibility

When to use it

Shows one version of a short text at a time, so people can flip between the AI suggestion and their own edit. The original is kept so they can always go back.

Made of: Version switch · Revert button · Text · Status for screen readers

Use it for

A short AI suggestion the person has edited, such as a reply draft or a title.
Comparing the AI's wording with the person's own before they keep one.
Dropping an edit and going back to the original suggestion.

Not for

Long text where people need to see exactly what changed: use DiffView.
Several versions of one chat message: use VersionPager.

Do and avoid

Lisbon weekend with Sam

Do. A short title flips between the AI version and the edit.

Day one: walk the old town, lunch near the castle, then a tram to the river. Day two: a boat trip and dinner by the harbour.

Avoid. Long text swaps as a whole, so nobody can spot what changed.

Do

Keep the AI version until the person reverts or discards it.
Use it for short text where a side-by-side view would be too much.
Clear the edit in onRevert. The part shows the AI version but does not remove your stored edit.

Avoid

Do not overwrite the AI version when the person edits.
Do not use it for long documents. A view that highlights changes fits better.
Do not show the switch before an edit exists.

On a phone

The switch and the Revert button sit on one line and wrap when they do not fit.
The two switch options keep their size and have a 44px tap area on a touch screen, and their labels do not wrap.
The value card fills the width, so long text wraps inside it.

Seen in products

IBM Carbon for AI defines a Revert pattern. People toggle between AI-suggested and user-edited content and can return to the original AI value.

Carbon for AI guidelines (opens in a new tab)

Properties

Prop	Type	Default	Description
aiValuerequired	ReactNode	none	The original AI suggestion.
userValue	ReactNode	none	The person's edit. Without it only the AI value shows.
value	"ai" \| "user"	none	Controlled active version.
defaultValue	"ai" \| "user"	"user" when an edit exists	Starting version when uncontrolled.
onChange	(value: "ai" \| "user") => void	none	Called when the version changes.
onRevert	() => void	none	Called when Revert to original is chosen.
aiLabel	string	"AI suggestion"	Label of the AI option.
userLabel	string	"Your edit"	Label of the edit option.
revertLabel	string	"Revert to original"	Label of the revert button.
label	string	"Version"	Accessible name of the switch.
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 RevertToggle 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.

RevertToggle in Figma: each property and the React prop it sets
Figma property	React	Values
Value	`value`	AI, User
AiValue	`aiValue`	Any text
UserValue	`userValue`	Any text

States

States this part has beyond its default look. Build each one your screen can reach. States set by a property are in the Code tab.

no edit: Without userValue only the AI value is shown and the switch and revert button are hidden.
reverted: Pressing the revert button switches back to the AI version and announces it to screen readers.

Tokens

Change one of these and every part that uses it follows.

--surface
--surface-sunken
--border
--radius-card

After an edit