Buttons

Confirm button

For actions worth a second thought. The first press turns it red and asks; a second press within a few seconds goes ahead. Otherwise it quietly goes back.

Installation

npx sinaui add confirm-button

Copy src/lib/ui/ConfirmButton.svelte, with Button.svelte, Morph.svelte, Icon.svelte, announce.ts and tokens.css. No dependencies.

Examples

Withdraw a loan

Press once to be asked, again to confirm. Wait, press Escape or move away and it goes back.

<script lang="ts">
	import ConfirmButton from '#lib/ui/ConfirmButton.svelte';

	let status = $state('');
</script>

<ConfirmButton onconfirm={() => (status = 'The loan of the Canon of Medicine was withdrawn.')}
	>Withdraw loan</ConfirmButton
>
<p role="status">{status}</p>

<style>
	p {
		margin: 0;
		color: var(--ui-muted);
	}
</style>

Deleting something

When onconfirm returns a promise, it works, then shows it’s done. This one waits five seconds for an answer.

<script lang="ts">
	import ConfirmButton from '#lib/ui/ConfirmButton.svelte';

	const remove = () => new Promise((resolve) => setTimeout(resolve, 1000));
</script>

<ConfirmButton onconfirm={remove} confirm="Delete for everyone?" done="Deleted" timeout={5000}
	>Delete the draft</ConfirmButton
>

Props

Prop	Type	Default
`onconfirm`	`() => Promise \| void` (required)
`confirm`	`string`	`'Are you sure?'`
`done`	`string`	`'Done'`
`timeout`	`number` (ms)	`3000`
`variant`	`'danger' \| 'primary'`: a light tint at rest, solid once it asks	`'danger'`
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`

Keyboard

Key	Does
`Enter` `Space`	Ask, then confirm
`Escape`	Change your mind

Accessibility

The question is announced with how to confirm it.
Moving focus away, Escape or waiting cancels it.
With reduced motion, labels fade without sliding.