LinkButton

Button navigation-shaped — anchor biasa, Wayfinder/Inertia routing, atau external link. Gabungan dari AnchorButton+InertiaButton lama.

Bagian dari: vue-sabutton · Family: Basic

---

Import

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

Instalasi: lihat Installation & Setup di halaman utama.

---

Usage

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

<template>
  <!-- plain link -->
  <LinkButton href="https://example.com" target="_blank">Kunjungi situs</LinkButton>

  <!-- Wayfinder action — href object selalu confidently routed lewat Inertia -->
  <LinkButton :href="show(post.id)" :icon="eyeIcon">Lihat Post</LinkButton>

  <!-- string href, opt-in Inertia -->
  <LinkButton href="/posts/5" inertia>Lihat Post (SPA)</LinkButton>
</template>

---

API Reference

LinkButton

Cara Penggunaan:

Tag yang dirender bergantung pada href/inertia/target — bisa <a>, <button> (auto-switch untuk method non-GET), atau Inertia <Link>. Lihat Core Concepts: href untuk aturan lengkapnya. $attrs di-spread ke <Link> saat mode Inertia aktif, jadi prop khusus Inertia (preserveScroll, data, onSuccess, ...) tetap jalan tanpa perlu dideklarasikan ulang di sini.

Props

Name	Type	Default	Description
href	string | { url: string; method?: 'get'|'post'|'put'|'patch'|'delete' }	required	Tujuan navigasi. Object → selalu Inertia. String → <a> biasa kecuali inertia di-set
inertia	boolean	false	Opt-in Inertia routing untuk href string. Tidak pernah auto-detect
target	string	-	Target non-_self selalu override balik ke tag native, terlepas dari href/inertia
rel	string	"noopener noreferrer" saat target membuka browsing context baru	Override manual attribute rel
color	ButtonColor	'secondary'	Sama seperti BasicButton
outline	boolean	false	Sama seperti BasicButton
small	boolean	false	Sama seperti BasicButton
expanded	boolean	false	Sama seperti BasicButton
disabled	boolean	false	Sama seperti BasicButton
icon	IconInput	-	Sama seperti BasicButton
onLoading	LoadingIndicator	false	Sama seperti BasicButton
tooltip	string	-	Sama seperti BasicButton
tooltipColor	ButtonColor	mengikuti color	Sama seperti BasicButton
pulse	PulseTarget	false	Sama seperti BasicButton
pulseColor	ButtonColor	mengikuti color	Sama seperti BasicButton
badge	boolean | string	-	Sama seperti BasicButton
badgeColor	ButtonColor	mengikuti color	Sama seperti BasicButton
badgePosition	BadgePosition	'tr'	Sama seperti BasicButton
externalIndicator	boolean	mengikuti target classification	Force on/off affordance "keluar dari SPA" — default mengikuti apakah target membuka browsing context baru

Slots

Name	Props	Description
default	-	Isi teks/konten link. Kosong → icon-only

Contoh:

<LinkButton
  href="https://docs.example.com"
  target="_blank"
  color="primary"
>
  Dokumentasi
</LinkButton>

---

Styling

Sama dengan BasicButton — memakai variable --sa-bt--height, --sa-bt--pulse-color, --sa-bt--tooltip-pad, --sa-bt--tooltip-z yang sama.

---

Related Components

Bagian dari family Basic:

• BasicButton — versi form-shaped (tanpa href) dari button ini