VariationActions

Stable

A row of things you can do with one AI result, each with a Subtle or Strong choice, and a line saying where it came from.

Also known as more like this, upscale, variation buttons

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

Made from Variant B

<VariationActions lineage="Made from Variant B" onAction={(id, strength) => {}} />

The standard list is Vary, Upscale, Remix and Extend. Extend has no strength choice.

Usage Code Design Accessibility

When to use it

A row of things to do with one result, such as Vary or Upscale. Each action keeps its own strength choice and shows its cost beside it, so nothing is charged by surprise.

Made of: Where it came from · Action button · Strength choice · Cost note

Use it for

Under a generated image or clip, to make a new take from it.
Showing what each action costs before it runs.
Saying which result this one came from, with the lineage line.

Not for

Settings for something not made yet: use ParameterPanel.
Copy, retry and feedback on a chat reply: use MessageActions.
Choosing between several results side by side: use VariantGrid.

Do and avoid

4 credits
2 credits

Do. Each action shows its cost, so nothing is charged by surprise.

Avoid. No cost is shown, so the charge comes as a surprise later.

Do

Say which result this one came from.
Show what each action costs, if it costs anything.
Keep the strength choice next to the action it changes.
Hide the strength choice for actions that do not have one.

Avoid

Do not run an action when someone changes strength. Only the action button does that.
Do not put more than a handful of actions in one row.
Do not hide costs and charge afterward.
Do not use the "came from" line as decoration. Leave it out when the result has no source.

On a phone

Each action is its own row: the button, its strength switch and its cost wrap onto new lines when the row is full.
Buttons and switch options keep their size and have a 44px tap area on a touch screen.

Seen in products

Midjourney Vary has Subtle and Strong.
Midjourney Upscale has Subtle and Strong.
Midjourney Remix edits the prompt text and also has Subtle and Strong.
The Midjourney editor has aspect-ratio buttons that outpaint to the new ratio.
Suno has Extend, Cover and Remaster on songs, and Studio 1.2 (Feb 2026) added Alternates. Third-party sources are thin.
Sora has Remix, Re-cut, Blend, Loop and Storyboard. Third-party sources are thin.
Shape of AI lists Variations under Governors.

Properties

Prop	Type	Default	Description
actions	VariationAction[]	Vary, Upscale, Remix, Extend	Each action has an id, a label, an optional cost node and an optional strength flag. Set strength to false to hide the choice.
onActionrequired	(actionId: string, strength: string) => void	none	Called when an action button is pressed. Strength is an empty string for actions with no strength choice.
strengths	SegmentOption<string>[]	Subtle, Strong	Strength choices shared by all actions that have one.
defaultStrength	string	none	Strength each action starts on. Defaults to the first strength.
lineage	ReactNode	none	Line above the actions, for example Made from Variant B.
disabled	boolean	none	Disables the action buttons.
className	string	none	Extra classes for the wrapper.

"Show code under the preview gives the code for the example on the stage."

In Figma

In Figma, one VariationActions 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.

VariationActions in Figma: each property and the React prop it sets
Figma property	React	Values
Disabled	`disabled`	On or off
Lineage	`lineage`	Any text

Tokens

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

--fg-muted
--fg-subtle
--border
--surface-sunken

Standard actions, with where it came from