Action cost hintPro

The credit cost on generate, upscale and run buttons, rolling as parameters change it, with a tooltip breakdown and the balance after, and a blocked state that says how many more credits are needed.

Markdown

On this page

ProChange image count, quality and upscaling: the cost on Generate rolls, and blocks past the balance.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/action-cost-hint

Usage

tsx

import { ActionCostButton } from "@/components/ui/chatcn/pro/action-cost-hint"

<ActionCostButton
  cost={cost}
  breakdown={[{ label: "4 images at 2", credits: 8 }]}
  balance={credits}
  onTopUp={openTopUp}
  onClick={generate}
>
  Generate
</ActionCostButton>

When balance is under cost the action is blocked in place: it stays focusable (with aria-disabled) so the reason can be read, and a line next to it says how many more credits are needed with a top up button. ActionCost is the chip on its own, and CostBreakdown the tooltip content, for your own buttons.

Examples

States

ProSolid, outline and ghost actions, an estimate, the blocked state with a top up and chips.

Props

Prop	Type	Notes
`children`	`ReactNode`	The action: Generate, Upscale, Run
`cost`	`number`	Rolls when it changes
`breakdown`	`{ label, credits }[]`	Tooltip rows
`balance`	`number`	Enables the balance after row and the blocked state
`estimate`	`boolean`	Shows about and ~
`onTopUp`, `topUpLabel`		Shown next to a blocked action
`icon`, `variant`, `size`		As the kit button. Default solid, md
`unit`, `locale`	`string`	Default credits
`labels`	`Partial<ActionCostLabels>`	Every string the action, its tooltip and its blocked line show or announce, for translation

Keyboard

Key	Action
Focus	Shows the breakdown tooltip
`Enter`, `Space`	Run the action, unless it is blocked

Accessibility

The button is described by the cost, the breakdown and, when blocked, how many more credits are needed.
Blocked is shown by the label and the alert icon next to it, not only by dimming.

Motion

The cost rolls digit by digit in 280 ms when a parameter changes it. The breakdown is the kit tooltip (125 ms).
Reduced motion swaps digits at once.