Components · Split button · Use

Split button

Choose a configuration and copy the result.

State

Markup

<script lang="ts">
	import { Menu } from '@ark-ui/svelte';
	import ChevronDownIcon from '@lucide/svelte/icons/chevron-down';
</script>

<div class="split-button-root">
	<button type="button" class="button-root button-filled split-button-leading">Save</button>
	<Menu.Root>
		<Menu.Trigger class="button-root button-filled split-button-trailing" aria-label="More options">
			<ChevronDownIcon class="split-button-trailing-icon" aria-hidden="true" />
		</Menu.Trigger>
		<Menu.Positioner>
			<Menu.Content class="split-button-menu">
				<Menu.Item value="draft" class="split-button-menu-item">Save as draft</Menu.Item>
			</Menu.Content>
		</Menu.Positioner>
	</Menu.Root>
</div>