Inline Confirm
Feedback next to the control that was used, not in the corner: Copied, Saved.
<InlineConfirm message="Saved">
{({ confirm }) => <Button onClick={confirm}>Save settings</Button>}
</InlineConfirm>Props
appearance
Installation
npx shadcn@latest add https://sproutboat.com/ikada/r/inline-confirm.jsonThe CLI writes components/ikada/inline-confirm.tsx and merges the ikada theme into your CSS. Or take it from the package: import { InlineConfirm } from "@sproutboat/ikada";
Usage
import { InlineConfirm } from "@/components/ikada/inline-confirm";
<InlineConfirm message="Saved">
{({ confirm }) => <Button onClick={confirm}>Save settings</Button>}
</InlineConfirm>Examples
<InlineConfirm message="Saved">
{({ confirm }) => <Button onClick={confirm}>Save settings</Button>}
</InlineConfirm><InlineConfirm message="Saved" appearance="inline">
{({ confirm }) => <Button onClick={confirm}>Save settings</Button>}
</InlineConfirm><InlineConfirm message="Copied" announce="Deploy URL copied to clipboard">
{({ confirm }) => <Button onClick={confirm}>Copy URL</Button>}
</InlineConfirm>Props
| Prop | Type | Description |
|---|---|---|
| messagerequired | string | The word shown and announced: "Copied", "Saved". |
| announce | string | Screen-reader text when it differs from the visible word, e.g. "Copied to clipboard". |
| childrenrequired | (api: { confirm: () => void; active: boolean; }) => ReactNode | The control. It receives `confirm`; call it when the action succeeded. |
| appearance | "inline" | "bubble" | `bubble` floats above the control and never moves the layout; `inline` sits beside it in a reserved slot. Default `bubble`. |
| duration | number | Milliseconds the confirmation stays. Default 1600. |
Also takes every prop of Omit<ComponentProps<"span">, "children">.