Svelte 5 component · fractalsvelte-ui · Actions

SplitButton

A dual-action control pairing a primary button trigger with a secondary dropdown chevron button. Useful when the default action has associated alternate options.

All components Source

Install

SplitButton is a Svelte 5 split button component in @fractaldesign/fractalsvelte-ui. It works in SvelteKit and in any Svelte 5 app.

pnpm add @fractaldesign/fractalsvelte-ui

Import

import

import { SplitButton } from '@fractaldesign/fractalsvelte-ui';

Usage

Example

<SplitButton variant={'primary'} size={'md'} shape={'rounded'}>Click me</SplitButton>

Props

Also accepts every attribute of HTMLAttributes, spread onto the root element.

Name	Type	Default
`variant`	`Variant` `'primary' \| 'secondary' \| 'soft' \| 'outline' \| 'ghost' \| 'destructive' \| 'surface'`	`'primary'`
`size`	`Size` `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	`'md'`
`shape`	`Shape` `'square' \| 'rounded' \| 'pill'`	`'rounded'`
`disabled`	`boolean`	`false`
`loading`	`boolean`	`false`
`dropdownLabel`	`string`	`'More options'`
`class`	`string`	`''`
`onclick`	`(event: MouseEvent) => void`	`—`
`ondropdown`	`(event: MouseEvent) => void`	`—`

Snippets

Name	Type	Default
`children`	`Snippet`	`—`

Source

Show the SplitButton.svelte source

SplitButton.svelte

<script lang="ts">
	import type { Snippet } from 'svelte';
	import type { HTMLAttributes } from 'svelte/elements';
	import type { Variant, Size, Shape } from '../../types';
	import Button from './Button.svelte';
	import IconButton from './IconButton.svelte';

	interface Props extends HTMLAttributes<HTMLDivElement> {
		variant?: Variant;
		size?: Size;
		shape?: Shape;
		disabled?: boolean;
		loading?: boolean;
		dropdownLabel?: string;
		class?: string;
		children?: Snippet;
		onclick?: (event: MouseEvent) => void;
		ondropdown?: (event: MouseEvent) => void;
	}

	let {
		variant = 'primary',
		size = 'md',
		shape = 'rounded',
		disabled = false,
		loading = false,
		dropdownLabel = 'More options',
		class: className = '',
		children,
		onclick,
		ondropdown,
		...restProps
	}: Props = $props();
</script>

<div class="f-split-btn {className}" data-shape={shape} {...restProps}>
	<Button
		{variant}
		{size}
		{shape}
		{disabled}
		{loading}
		class="f-split-main"
		{onclick}
	>
		{#if children}
			{@render children()}
		{/if}
	</Button>

	<IconButton
		label={dropdownLabel}
		{variant}
		{size}
		{shape}
		{disabled}
		class="f-split-arrow"
		onclick={ondropdown}
	>
		<svg
			xmlns="http://www.w3.org/2000/svg"
			width="14"
			height="14"
			viewBox="0 0 24 24"
			fill="none"
			stroke="currentColor"
			stroke-width="2.5"
			stroke-linecap="round"
			stroke-linejoin="round"
		>
			<path d="m6 9 6 6 6-6" />
		</svg>
	</IconButton>
</div>

<style>
	@layer fractalsvelte-ui.components {
		.f-split-btn {
			display: inline-flex;
			align-items: stretch;
			box-sizing: border-box;
		}

		.f-split-btn :global(.f-split-main) {
			border-top-right-radius: 0 !important;
			border-bottom-right-radius: 0 !important;
		}

		.f-split-btn :global(.f-split-arrow) {
			border-top-left-radius: 0 !important;
			border-bottom-left-radius: 0 !important;
			margin-left: -1px;
			border-left-color: rgba(255, 255, 255, 0.2) !important;
		}
	}
</style>

Button An interactive trigger for user actions with support for multiple visual variants, sizes, shapes, and an…ButtonGroup A clustered group container that attaches adjacent buttons seamlessly with merged borders or separates them…CloseButton A standardized dismissal trigger for dialogs, drawers, toasts, and alerts.CopyButton A one-click clipboard copy utility that transitions into a confirmed checkmark state upon copying.HoldToConfirm A high-stakes press-and-hold confirmation button with animated progress fill.IconButton A compact icon-only action button with accessible screen-reader labelling and hover tooltips.