Cost Badge
What a run costs your user, shown where they commit to it, and whether their balance covers it.
In use
Beside submit in every studio, priced from the exact request about to be sent. It turns red over the balance.
Your image will appear here
Your image will appear here
Your image will appear here
Your image will appear here
Paint over what to change. Tab reaches the marks: arrow keys move one, Enter edits its note, Delete removes it.
Your video will appear here
Installation
pnpm dlx shadcn@latest add https://mgp.paukraft.com/r/cost-badge.jsonCostBadge
Costs are yours, not BFL's: work them out from the run's settings, e.g. times the image count or the resolution's megapixels. A submission's response carries BFL's own cost in its credits, for your margins.
| Prop | Type | Default |
|---|---|---|
| cost | numberWhat the run costs your user, in your unit. | — |
| balance | numberWhat they can spend. Over it, the badge turns destructive, sets data-unaffordable and tells screen readers. | — |
| format | (cost: number) => ReactNodeLabels the cost: "8 credits", "$0.40", … | formatCredits |
| variant | "default" | "inline"default is a tag tinted by the color it sits on, e.g. beside a submit button; inline is plain text, for "Upscale 8 credits" inside a button. | "default" |
| unaffordableLabel | stringRead after the cost when over balance. | "more than your balance" |
| children | ReactNodeBefore the cost, e.g. a coin icon. | — |
Helpers
| Prop | Type | Default |
|---|---|---|
| formatCredits | (cost: number) => stringThe default label: 1 credit, 4 credits. The Model Picker uses it too. | — |
| canAfford | (cost: number, balance?: number) => booleanWhether cost fits in balance, e.g. to disable the action beside the badge. | — |