Forms

Button

Triggers an action, or navigates when given an href.

Installation

npx sinaui add button

Copy src/lib/ui/Button.svelte into your project, with tokens.css if you haven't already. No dependencies; icons are optional.

Examples

Primary

The main action. Use one per view.

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

<Button>Borrow manuscript</Button>

Secondary

For the other actions beside the main one.

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

<Button variant="secondary">Add to reading list</Button>

Ghost

For quiet actions in toolbars, cards and lists.

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

<Button variant="ghost">Preview</Button>

Danger

Only for what can't be undone.

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

<Button variant="danger">Withdraw loan</Button>

Small

For tight spaces like table rows. On touch screens every size grows to at least 44px tall.

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

<Button size="sm" variant="secondary">Annotate</Button>

Large

For a page's main call to action.

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

<Button size="lg">Enter Bayt al-Hikma</Button>

Loading

The label is swapped for a spinner at the same width, so nothing around it moves. It keeps its name and focus, and ignores repeat clicks.

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

	let copying = $state(false);

	function transcribe() {
		copying = true;
		setTimeout(() => (copying = false), 1500);
	}
</script>

<Button loading={copying} onclick={transcribe}>Transcribe</Button>

With an icon

An icon before the label.

<script lang="ts">
	import Button from '#lib/ui/Button.svelte';
	import Icon from '#lib/ui/Icon.svelte';
	import { Share08Icon } from '@hugeicons/core-free-icons';
</script>

<Button variant="secondary">
	<Icon icon={Share08Icon} /> Send to Córdoba
</Button>

Icon only

Square, and needs an aria-label.

<script lang="ts">
	import Button from '#lib/ui/Button.svelte';
	import Icon from '#lib/ui/Icon.svelte';
	import { Share08Icon } from '@hugeicons/core-free-icons';
</script>

<Button square variant="secondary" aria-label="Share manuscript">
	<Icon icon={Share08Icon} />
</Button>

Disabled

Prefer explaining why something is unavailable; a disabled button can't be focused or explain itself.

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

<Button disabled>Archived</Button>

Link

With href it renders a real link, and variant="link" makes it look like one.

Meet the scholars

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

<Button href="#link" variant="link">Meet the scholars</Button>

Link as a button

A link with a button style. Use it only when navigation is the page's main call to action.

Enter Bayt al-Hikma

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

<Button href="#link-button">Enter Bayt al-Hikma</Button>

Props

Prop	Type	Default
`variant`	`'primary' \| 'secondary' \| 'ghost' \| 'danger' \| 'link'`	`'primary'`
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`
`loading`	`boolean`	`false`
`square`	`boolean`	`false`
`href`	`string`	renders `<a>`
…rest	Any `<button>` or `<a>` attribute.

Accessibility

Renders <button type="button">, so it can't submit a form by accident. Pass type="submit" when it should.
While loading it uses aria-disabled, not disabled: it stays in the tab order, so screen reader users don't lose their place.
aria-pressed turns it into a toggle button with a visible pressed state.

Key	Action
`Enter` / `Space`	Activates the button (links: `Enter` only).