SplitButton

Button dua segmen: aksi utama (form-shaped) + caret yang membuka dropdown menu.

Bagian dari: vue-sabutton · Family: Split

---

Import

import { SplitButton } from '@bpmlib/vue-sabutton';

Instalasi: lihat Installation & Setup di halaman utama.

---

Usage

<script setup lang="ts">
import { SplitButton } from '@bpmlib/vue-sabutton';

const menu = [
  { label: 'Simpan sebagai draft', onClick: saveDraft },
  { label: 'Jadwalkan', onClick: schedule },
];
</script>

<template>
  <SplitButton color="primary" :menu="menu" @click="publish">
    Publish
  </SplitButton>
</template>

---

API Reference

SplitButton

Cara Penggunaan:

Segmen utama adalah <button> (form-shaped, sama seperti BasicButton) — mendukung type/asSubmit/asReset/form. Segmen caret membuka dropdown menu berisi item dari menu. Lihat Core Concepts: menu/menuFieldMap untuk kontrak item lengkap.

Accessibility:

Component ini sudah include built-in accessibility features:

• Keyboard navigation: Tab ke trigger caret → Enter/Space/↓ membuka menu → ↑/↓ pindah antar item (wrap) → Home/End ke item pertama/terakhir → typeahead karakter → Escape/Tab menutup menu
• Focus management: fokus real DOM (.focus() roving-tabindex) per item, bukan virtual-focus — item menu adalah element interaktif asli (<button>, <a>)

Props

Name	Type	Default	Description
color	ButtonColor	'secondary'	Sama seperti BasicButton, berlaku untuk kedua segmen
outline	boolean	false	Sama seperti BasicButton
small	boolean	false	Sama seperti BasicButton
expanded	boolean	false	Sama seperti BasicButton
disabled	SplitDisabled	false	Lihat breakdown SplitDisabled di bawah
icon	IconInput	-	Icon segmen utama
onLoading	LoadingIndicator	false	Segmen utama busy — caret tetap live (dua aksi terpisah)
type	'button' | 'submit' | 'reset'	'button'	Type segmen utama
asSubmit	boolean	false	Precedence: asSubmit > asReset > type
asReset	boolean	false	—
form	string	-	—
tooltip	string	-	Tooltip segmen utama
tooltipColor	ButtonColor	mengikuti color	—
pulse	PulseTarget	false	—
pulseColor	ButtonColor	mengikuti color	—
badge	boolean | string	-	—
badgeColor	ButtonColor	mengikuti color	—
badgePosition	BadgePosition	'tr'	—
menu	T[]	required	Item dropdown — unconstrained, lihat Core Concepts
menuFieldMap	MenuItemFieldMap<T>	-	Field-mapping untuk menu yang bukan bentuk MenuItemDef
menuPlacement	'bottom-start' | 'bottom-end'	'bottom-start'	Posisi awal panel dropdown (auto-flip jika dekat viewport edge)
menuAnchorIcon	boolean	true	Tampilkan trailing anchor-indicator pada item ber-href

SplitDisabled

type SplitDisabled = boolean | { button?: boolean; menu?: boolean; both?: boolean };

• boolean — hanya menonaktifkan segmen utama; caret tetap live (sama makna dengan disabled di BasicButton)
• { menu: true } — hanya menutup akses dropdown; segmen utama tetap live
• { button: true } — setara dengan bentuk boolean di atas, ditulis eksplisit untuk simetri dengan menu
• { both: true } — satu-satunya cara menonaktifkan kedua segmen sekaligus; both selalu menang atas button/menu yang di-set bersamaan

Contoh:

<SplitButton :disabled="{ menu: true }" :menu="menu">Publish</SplitButton>

Events

Name	Payload	Description
click	MouseEvent	Klik pada segmen utama

Slots

Name	Props	Description
default	-	Isi teks/konten segmen utama. Kosong → icon-only
item	{ item: T, index: number }	Ganti konten baris menu — item adalah raw element (belum di-map). Wrapper baris (role, keyboard reachability, hover) tetap dikendalikan library

---

Styling

Styling sepenuhnya self-contained, memakai variable BasicButton yang sama, ditambah:

Variable	Default	Description
--sa-bt--menu-z	40	Z-index panel dropdown (Teleported ke body)

Seam antar segmen utama dan caret adalah border translucent (color-mix(in srgb, currentColor 25%, transparent)), di-skip pada mode outline karena border segmen sendiri sudah cukup kontras.

---

Related Components

Bagian dari family Split:

• SplitLinkButton — sama seperti ini, tapi segmen utamanya link (href-driven)

Berbagi kontrak menu/menuFieldMap dengan:

• MenuButton — satu trigger, tanpa segmen aksi terpisah