KQ-024 · ACTION/RELAY
Action Relay
A button that narrates the job — state labels roll through a one-line mask with a blur crossfade while the width follows the new content.
KQ-024 · ACTION/RELAY
Release console · prod-eu-1Deploy to production
Relay log
— awaiting first deploy
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/action-relay
Props
- state / states
- string / Record<string, ReactNode>
- default —
- Controlled state key and the content per state — nodes may embed icons or a small loader.
- busyStates
- string[]
- default —
- States that report aria-busy and suppress interaction without stealing focus.
- onSettled
- (state) => void
- default —
- Fires when the incoming roll lands — chain done → idle off it.
- announcements
- Record<string, string>
- default —
- Screen-reader text per state; plain-text nodes announce themselves.
- variant / size
- pressure-button scales
- default "solid" / "md"
- Visual style, mirroring the button family.
| Prop | Type | Default | Description |
|---|---|---|---|
| state / states | string / Record<string, ReactNode> | — | Controlled state key and the content per state — nodes may embed icons or a small loader. |
| busyStates | string[] | — | States that report aria-busy and suppress interaction without stealing focus. |
| onSettled | (state) => void | — | Fires when the incoming roll lands — chain done → idle off it. |
| announcements | Record<string, string> | — | Screen-reader text per state; plain-text nodes announce themselves. |
| variant / size | pressure-button scales | "solid" / "md" | Visual style, mirroring the button family. |