Skip to content
Pinky UI

actions

Streaming Actions

One button that morphs between Stop and Regenerate as a response streams in and finishes.

  • actions
  • chat
  • streaming
  • button
  • morph

Live preview

Quick usage

usage
import { StreamingActions } from "@pinky-ui/ai-ui";

<StreamingActions state={isStreaming ? "streaming" : "idle"} onStop={stop} onRegenerate={regenerate} />

Install

Add @pinky-ui/ai-ui as a dependency, or use the CLI to copy this component's source directly into your project — no dependency to manage, fully editable.

shell
npm install @pinky-ui/ai-ui

Prefer to run the whole repository locally instead?

repository
git clone https://github.com/florash/Pinky-UI.git
cd Pinky-UI
npm install
npm run dev

Props

PropTypeDefaultDescription
state"idle" | "streaming"—Which action — and which icon and label — the button currently offers.
onStop() => void—Called when clicked while `state` is "streaming".
onRegenerate() => void—Called when clicked while `state` is "idle".
classNamestring—Applied to the button.

Accessibility

  • A single real `<button>` throughout — the label text itself communicates the action; nothing depends on the icon shape alone.

Performance

  • Uses Motion's `layout`/`layoutId` to animate the shared icon and width change — no manual FLIP measurement.

Reduced motion

The icon and label still swap; only the shared-layout morph animation between the two shapes is removed.

When to use

  • Directly under or beside a streaming assistant response.

When not to use

  • Anywhere Stop and Regenerate need to be two separate, simultaneously visible controls.