Buttons
Hold to confirm
Press and hold until it fills. Let go early and it drains away, so nothing happens by accident.
Installation
npx sinaui add hold-to-confirmCopy src/lib/ui/HoldToConfirm.svelte, with motion.ts, spring.ts, Button.svelte, Morph.svelte, Icon.svelte, announce.ts and tokens.css. No dependencies.
Examples
Remove a draft
Hold until the fill reaches the end.
Press and hold to confirm
<script lang="ts">
import HoldToConfirm from '#lib/ui/HoldToConfirm.svelte';
let status = $state('');
</script>
<HoldToConfirm
onconfirm={() => (status = 'The draft of the Book of Optics was removed.')}
done="Removed">Hold to remove the draft</HoldToConfirm
>
<p role="status">{status}</p>
<style>
p {
margin: 0;
color: var(--ui-muted);
}
</style>A longer hold
duration sets how long to hold; here 1.6 seconds, on a primary button.
Press and hold to confirm
<script lang="ts">
import HoldToConfirm from '#lib/ui/HoldToConfirm.svelte';
const publish = () => new Promise((resolve) => setTimeout(resolve, 800));
</script>
<HoldToConfirm onconfirm={publish} variant="primary" duration={1600} done="Published"
>Hold to publish the translation</HoldToConfirm
>Props
| Prop | Type | Default |
|---|---|---|
onconfirm | () => Promise | void (required) | |
duration | number (ms) | 1200 |
done | string | 'Done' |
variant | 'primary' | 'danger' | 'danger' |
size | 'sm' | 'md' | 'lg' | 'md' |
Keyboard
| Key | Does |
|---|---|
| Hold Space or Enter | Fill and confirm |
| Let go | Drain away, nothing happens |
Accessibility
- Screen readers hear “Press and hold to confirm” with the button’s name.
- Confirming is announced.
- Long-pressing on a phone doesn’t open the text menu.