Variation actionsPro
Every next step for a generation in one toolbar: vary subtle or strong, upscale 2× or 4×, remix, use as reference and download, each with a single key shortcut and its own running, done and failed state.
On this page
ProVary, upscale, remix, reference and download in one bar with single key shortcuts and states per action.
Installation
Usage
import { VariationActions } from "@/components/ui/chatcn/pro/variation-actions"
<VariationActions onAction={(action) => api.run(action, image.id)} />Return a promise from onAction and each button shows running, then done or failed, on its own. Pass status to drive any action yourself. Upscales stay marked once done, since the image has that version now; the others show their check for two seconds.
Shortcuts listen inside the nearest [data-hotkey-scope] (the lightbox sets one), or the bar's parent, so two bars on a page never fight. Use hotkeys="global" for a single bar on the page, or "off".
Examples
States
Running, done, failed, disabled actions, the icon only bar with tooltips, and right to left.
ProRunning, done, failed, disabled and the icon only bar.
Props
| Prop | Type | Notes |
|---|---|---|
actions | ("vary-subtle" | "vary-strong" | "upscale-2x" | "upscale-4x" | "remix" | "reference" | "download")[] | Which actions, in order. Vary and upscale pairs group when both are present |
onAction | (action) => unknown | Return a promise for running, done and failed states |
status | Partial<Record<action, "idle" | "running" | "done" | "error">> | Controlled states. Actions left out use the internal state |
disabled | boolean | action[] | The whole bar or some actions |
hotkeys | "scoped" | "global" | "off" | Default scoped |
hotkeyScope | RefObject<HTMLElement> | Element to listen on with scoped |
variant | "labels" | "icons" | icons is icon only with tooltips |
labels, shortcuts | Rename actions or remap keys; null removes a shortcut | |
doneMs | number | How long a check shows. Default 2000 |
Keyboard
| Key | Action |
|---|---|
V, Shift+V | Vary subtle, vary strong |
U, Shift+U | Upscale 2×, upscale 4× |
R, I, D | Remix, use as reference, download |
Tab | Into the toolbar on one action |
←, →, Home, End | Between actions. Mirrored in right to left |
Accessibility
- A
role="toolbar"with one tab stop. Vary and upscale are labelled groups, so "2×" reads as "Upscale 2×". - Each button carries
aria-keyshortcuts,aria-busywhile running, and upscalesaria-pressedonce done. - Starts, finishes and failures are announced politely: "Upscale 4× done".
- Failure uses the red token with an icon and a tooltip that says to try again.
Motion
- Buttons press to 0.97 in 100 ms. A state change swaps the icon or shortcut slot with the kit's 150 ms crossfade in the same footprint, so the bar never shifts.
- Nothing else moves. Under reduced motion the swap is instant.