Continue prompt
The last call of a page or a flow: a short question, what counts (days, seats, seconds), and the one action that continues — a calm card by default, an arcade cabinet as a variant.
Web only — React, from @krizaka/ui/continue-prompt. Beta: its API may still change in a minor version.
When to use
- The end of a trial or an offer: what is left, and the way to continue.
- The end of a told page: start again, go to the products.
- A drop or an event with places left, beside the one action.
When not to use
- A call to act inside a page's section, with two actions.Use instead: Call-to-action panel
- A countdown on its own, to a deadline.Use instead: Countdown
- Confirming a destructive action.Use instead: Confirm button
Installation
Install
npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcssStyles
@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";Import
import { ContinuePrompt } from "@krizaka/ui/continue-prompt";Examples
The end of a trial
Three days left, everything on, the one link that continues.
Your videos, challenges and earnings stay exactly where they are.
Arcade flavour
The cabinet at the end of a told page: a dark screen, a key-cap, back to the top.
Round one is over.
Props
A last call: a question, what counts, the closing words, the one action that continues — a button, or a link.
| Prop | Type | Default | Description |
|---|---|---|---|
actionLabelrequired | ReactNode | — | The action's words. |
titlerequired | ReactNode | — | The question (“Keep your studio?”, arcade “Continue?”). |
actionIcon | ReactNode | — | The action's glyph after its words; default an arrow. Decorative. |
actionKey | ReactNode | — | A key-cap before the action's words (“Enter”, arcade “1P Start”). Decorative. |
brand | string | — | A brand scope (krizaka → .brand-krizaka). |
caption | ReactNode | — | A small line at the top of the card (where it comes from). |
count | ReactNode | — | What counts, beside the question: a figure, or a live Countdown for a real deadline. Decorative: say it in words too. |
countdown | { readonly from: number; readonly to: number; } | — | A count that ticks down once when its scene plays ({ from: 9, to: 7 }), then waits; still under reduced motion.
Use count for anything else. |
highlight | ReactNode | — | In the deck, in the accent: the call (“Last places”, arcade “Insert coin”). |
hint | ReactNode | — | Beside the highlight: how (“One click, no card”). |
href | string | — | Makes the action a link. |
onAction | MouseEventHandler<HTMLButtonElement> | — | Runs the action (a client handler). Without href, the action is a button. |
status | ReactNode | — | A status with a green dot (“All features on”, “Credit 01”). |
variant | StoryVariant | default | default: a calm card. arcade: the cabinet — screws, a dark CRT that switches on, a coin deck. |
Accessibility
- The action is a
button(withonAction) or a link (withhref), named byactionLabel; the key-cap and the arrow are decorative. - The arcade screen switches on once in a stage; its loop runs only while on screen and never under
prefers-reduced-motion.
Best practices
- One action, named by what it does (“Continue with Creator”), never “OK”.
- For a real deadline, pass a live
Countdownascount; a still figure otherwise. - No false urgency: the count says something true.
Related components
Generated from the code of @krizaka/ui 2.10.0: its meta.ts, its examples and its types.Edit this documentation on GitHub