Buttons

Split button

A main action joined to a menu of related ones: press the left part to act, the arrow for the alternatives.

Installation

npx sinaui add split-button

Copy src/lib/ui/SplitButton.svelte, with Button.svelte, Icon.svelte, the dropdown/ folder and tokens.css. No dependencies.

Examples

Save, or save another way

Put the most common action on the left; the menu holds its variations.

<script lang="ts">
	import SplitButton from '#lib/ui/SplitButton.svelte';
	import * as Dropdown from '#lib/ui/dropdown/index.js';

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

<SplitButton onclick={() => (status = 'Translation saved.')}>
	Save
	{#snippet menu()}
		<Dropdown.Item onselect={() => (status = 'Saved as a new copy.')}>Save as copy</Dropdown.Item>
		<Dropdown.Item onselect={() => (status = 'Saved and sent to Córdoba.')}>
			Save and send to Córdoba
		</Dropdown.Item>
	{/snippet}
</SplitButton>
<p class="status" role="status">{status}</p>

<style>
	.status {
		min-block-size: 1.5em;
		margin: 0;
		color: var(--ui-muted);
	}
</style>

Secondary

<script lang="ts">
	import SplitButton from '#lib/ui/SplitButton.svelte';
	import * as Dropdown from '#lib/ui/dropdown/index.js';

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

<SplitButton
	variant="secondary"
	menuLabel="More ways to borrow"
	onclick={() => (status = 'Borrowed for two weeks.')}
>
	Borrow
	{#snippet menu()}
		<Dropdown.Item onselect={() => (status = 'Reserved for the reading room.')}>
			Read in the library
		</Dropdown.Item>
		<Dropdown.Item onselect={() => (status = 'A scribe will make you a copy.')}>
			Request a copy
		</Dropdown.Item>
	{/snippet}
</SplitButton>
<p class="status" role="status">{status}</p>

<style>
	.status {
		min-block-size: 1.5em;
		margin: 0;
		color: var(--ui-muted);
	}
</style>

Props

Prop	Type	Default
`variant`	`'primary' \| 'secondary'`	`'primary'`
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`
`onclick`	the main action
`menu`	`Snippet` of `Dropdown.Item` (required)
`menuLabel`	`string`: the arrow's name	`'More options'`
`disabled`	`boolean`	`false`

Keyboard

Key	Does
`Tab`	Moves between the action and the arrow
`Enter` `Space`	Runs the action, or opens the menu on the arrow
`↓`	Opens the menu from either part
`Escape`	Closes the menu, back on the arrow

Accessibility

The two parts are separate buttons in one group; the arrow is a menu button named by menuLabel.
The menu follows the Dropdown: arrow keys, typeahead, and focus returns to the arrow on close.
With reduced motion, the arrow flips without turning.