SplitLinkButton

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

Bagian dari: vue-sabutton · Family: Split

---

Import

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

Instalasi: lihat Installation & Setup di halaman utama.

---

Usage

<script setup lang="ts">
import { SplitLinkButton } from '@bpmlib/vue-sabutton';
import { show } from '@/actions/App/Http/Controllers/PostController'; // Wayfinder

const menu = [
  { label: 'Edit', href: '/posts/5/edit' },
  { label: 'Duplikat', onClick: duplicate },
];
</script>

<template>
  <SplitLinkButton :href="show(post.id)" :menu="menu" color="primary">
    Lihat Post
  </SplitLinkButton>
</template>

---

API Reference

SplitLinkButton

Cara Penggunaan:

Segmen utama adalah link navigation-shaped — sama seperti LinkButton, lihat Core Concepts: href untuk aturan resolusi tag. Segmen caret membuka dropdown menu, sama persis dengan SplitButton.

Berbeda dari SplitButton: komponen ini tidak mendeklarasikan defineEmits('click') — segmen utamanya adalah tag yang di-resolve (<a>/<Link>/<button>), jadi @click bekerja lewat native attrs fallthrough, bukan emit eksplisit.

Accessibility:

Sama seperti SplitButton — keyboard navigation dan focus management pada dropdown caret identik.

Props

Name	Type	Default	Description
href	LinkHref	required	Sama seperti LinkButton
inertia	boolean	false	Sama seperti LinkButton
target	string	-	Sama seperti LinkButton
rel	string	"noopener noreferrer" saat relevan	Sama seperti LinkButton
color	ButtonColor	'secondary'	Berlaku untuk kedua segmen
outline	boolean	false	—
small	boolean	false	—
expanded	boolean	false	—
disabled	SplitDisabled	false	Lihat breakdown SplitDisabled di halaman SplitButton
icon	IconInput	-	Icon segmen utama
onLoading	LoadingIndicator	false	—
tooltip	string	-	—
tooltipColor	ButtonColor	mengikuti color	—
pulse	PulseTarget	false	—
pulseColor	ButtonColor	mengikuti color	—
badge	boolean | string	-	—
badgeColor	ButtonColor	mengikuti color	—
badgePosition	BadgePosition	'tr'	—
externalIndicator	boolean	mengikuti target classification	Affordance "keluar dari SPA" untuk segmen utama
menu	T[]	required	Sama seperti SplitButton
menuFieldMap	MenuItemFieldMap<T>	-	—
menuPlacement	'bottom-start' | 'bottom-end'	'bottom-start'	—
menuAnchorIcon	boolean	true	—

Slots

Name	Props	Description
default	-	Isi teks/konten segmen utama
item	{ item: T, index: number }	Sama seperti SplitButton

---

Styling

Sama dengan SplitButton — variable --sa-bt--height, --sa-bt--menu-z, dll identik.

---

Related Components

Bagian dari family Split:

• SplitButton — sama seperti ini, tapi segmen utamanya form-shaped (<button>, bukan link)

Berbagi kontrak menu/menuFieldMap dengan:

• MenuButton — satu trigger, tanpa segmen aksi terpisah