# Inline Confirm

Feedback next to the control that was used, not in the corner: Copied, Saved.

Source page: https://sproutboat.com/ikada/components/inline-confirm

## Installation
```sh
npx shadcn@latest add https://sproutboat.com/ikada/r/inline-confirm.json
```
Or from the package: `import { InlineConfirm } from "@sproutboat/ikada";`
## Usage
```tsx
import { InlineConfirm } from "@/components/ikada/inline-confirm";

<InlineConfirm message="Saved">
  {({ confirm }) => <Button onClick={confirm}>Save settings</Button>}
</InlineConfirm>
```
## Examples
### Bubble
Floats above the control and never moves the layout. A polite live region announces the word. The control calls confirm() when the action succeeded.
```tsx
<InlineConfirm message="Saved">
  {({ confirm }) => <Button onClick={confirm}>Save settings</Button>}
</InlineConfirm>
```
### Inline
Sits beside the control in a reserved slot, for a row where a bubble would be clipped.
```tsx
<InlineConfirm message="Saved" appearance="inline">
  {({ confirm }) => <Button onClick={confirm}>Save settings</Button>}
</InlineConfirm>
```
### Different announcement
`announce` is what screen readers hear when it differs from the visible word.
```tsx
<InlineConfirm message="Copied" announce="Deploy URL copied to clipboard">
  {({ confirm }) => <Button onClick={confirm}>Copy URL</Button>}
</InlineConfirm>
```
## Props
### InlineConfirmProps
Also takes every prop of `Omit<ComponentProps<"span">, "children">`.
| Prop | Type | Description |
| --- | --- | --- |
| message | `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". |
| children | `(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. |
Source: https://github.com/baronunread/ikada/blob/main/src/components/inline-confirm.tsx