ButtonGroup

A joined row/column of buttons — a controlled segmented selector or an action toolbar. Composes Button; the selected state is a variant-swap (filled vs ghost), not a CSS override.

Single-select (segmented)

select="single" + bind:value. Exactly one item fills; arrow keys move the selection. Active: left.

variant

size

orientation

Multi-select (toggle)

select="multi" + bind:values. Each selected item fills; icon-only rows. Active: [bold].

Action toolbar + split-button

select="none" — each item runs its onclick. Export has a menu, so it renders as a split button (caret opens a Menu).

Split-button dropdown — `[ action ][ ▾ ]`

The classic "primary action + dropdown of alternatives" (what a standalone ButtonDropdown would be). Build it from two items: a normal action item (here with loading), plus a menuOnly item — a caret-only cell whose click opens a Menu. The menu uses a { divider: true } separator. Click Save to see the loading state.

import { ButtonGroup, toast } from '@spaethtech/svelte-ui';
import type { ButtonGroupItem } from '@spaethtech/svelte-ui';
import IconSave from '~icons/mdi/content-save';

let saving = $state(false);
async function doSave() { saving = true; await api.save(); saving = false; }

// $derived so `loading: saving` stays reactive
const items: ButtonGroupItem[] = $derived([
  { text: 'Save', icon: saveIcon, loading: saving, onclick: doSave },
  { menuOnly: true, menu: [
    { label: 'Save and close', onclick: saveAndClose },
    { label: 'Save as draft',  onclick: saveDraft },
    { divider: true },
    { label: 'Discard', danger: true, onclick: discard },
  ]},
]);

{#snippet saveIcon()}<IconSave />{/snippet}
<ButtonGroup {items} variant="primary" />

Slot (hand-authored)

Drop Buttons inside for the joined frame; you own behaviour + selected styling (select is items-only). Active: list.

Code

import { ButtonGroup } from '@spaethtech/svelte-ui';
import type { ButtonGroupItem } from '@spaethtech/svelte-ui';
import IconAlignLeft from '~icons/mdi/format-align-left';

let align = $state('left');
const items: ButtonGroupItem[] = [
  { value: 'left',   text: 'Left',   icon: alignLeft },
  { value: 'center', text: 'Center', icon: alignCenter },
  { value: 'right',  text: 'Right',  icon: alignRight },
];

<ButtonGroup {items} select="single" bind:value={align}
  variant="primary" />