Buttons
Action button
Runs a task and says how it went: working, then done or failed, in the button itself. The button keeps its size through every state.
Installation
npx sinaui add action-buttonCopy src/lib/ui/ActionButton.svelte, with Button.svelte, Morph.svelte, Icon.svelte, announce.ts and tokens.css. No dependencies.
Examples
Send and confirm
Press it: a spinner while it works, then a tick.
<script lang="ts">
import ActionButton from '#lib/ui/ActionButton.svelte';
const send = () => new Promise((resolve) => setTimeout(resolve, 1200));
</script>
<ActionButton action={send} done="Sent">Send to the copyists</ActionButton>When it fails
This one fails the first time. It says so in red, then goes back so you can try again. With pending, words sit beside the spinner while it works.
<script lang="ts">
import ActionButton from '#lib/ui/ActionButton.svelte';
// Fails the first time, works after: press it twice.
let tries = 0;
const save = () =>
new Promise((resolve, reject) =>
setTimeout(() => (++tries === 1 ? reject(new Error('Offline')) : resolve(null)), 1000)
);
</script>
<ActionButton
action={save}
pending="Saving…"
done="Saved"
failed="Couldn’t save"
variant="secondary">Save the translation</ActionButton
>Props
| Prop | Type | Default |
|---|---|---|
action | () => Promise | void (required) | |
pending | string: words beside the spinner | |
done | string | 'Done' |
failed | string | 'Didn’t work' |
onerror | (error) => void | |
variant | 'primary' | 'secondary' | 'ghost' | 'primary' |
size | 'sm' | 'md' | 'lg' | 'md' |
Keyboard
| Key | Does |
|---|---|
| Enter Space | Run it |
Accessibility
- Working, done and failed are each announced; failure is announced straight away.
- While it works, presses are ignored, so a task never runs twice.
- With reduced motion, labels fade without sliding.