Props
| Name | Description |
|---|---|
activeClass Type: stringDefault'router-link-active' | CSS class applied when the component renders as a link and the target of the link is the current route or the url matches partially. Ported for Inertia compatibility. Applied on a path-prefix match — the section link that should stay lit on child pages. The component only attaches the name; the highlight is CSS you write. See example |
ariaCurrentValue Type: "page" | "step" | "location" | "date" | "time" | "true" | "false"Default'page' | Value forwarded to the Defaults to |
async Type: booleanDefaultfalse | Inertia: runs the visit without blocking — the page stays interactive and several async visits can be in flight at once. |
block Type: booleanDefaultfalse | Makes the component take the full available width (block-level layout) and centres its label; an anchor becomes Adds |
cacheFor Type: string | number | (string | number)[] | Inertia: how long a prefetched response stays fresh before it is re-fetched. A single duration, or |
cacheTags Type: string | string[] | Inertia: tags to file this visit's prefetch cache under, so a later request can invalidate the whole tagged group. |
component Type: string | Inertia: the page component this visit resolves to. Rarely set by hand — the server normally decides it. |
data Type: object | Request payload forwarded to Inertia when navigating via Inertia only: the payload sent with the visit. Ignored outside Inertia. See example |
disabled Type: booleanDefaultfalse | Disables user interaction. A native button gets the Adapts to the element: the native attribute on a button, and on a link the |
download Type: string | boolean | Marks an Always a native anchor navigation, never a router or Inertia visit, which is what makes |
exactActiveClass Type: stringDefault'router-link-exact-active' | CSS class applied when the component renders as a link and the target of the link and the url matches exactly. Ported for Inertia compatibility. Applied only on an exact match, and the one that also carries |
except Type: string[] | Inertia: the inverse of |
external Type: booleanDefaultfalse | Forces an The escape hatch for a same-origin URL that is not part of the SPA — a legacy route, another application behind the same domain. Same intent as Nuxt's |
headers Type: object | Additional HTTP headers forwarded to Inertia when navigating via |
href Type: string | Hyperlink reference used when rendering as an anchor (or as an Inertia link in Inertia-enabled apps). If provided and not disabled, the component renders as an anchor/Inertia link. Renders an anchor — a real document navigation. Under Inertia a same-origin |
instant Type: booleanDefaultfalse | Inertia: navigate optimistically on click and reconcile when the response lands, instead of waiting for the round trip. |
method Type: "get" | "post" | "put" | "patch" | "delete" | HTTP method used for Inertia navigation when Inertia only, and only with |
onBefore Type: (() => void) | Lifecycle hook invoked by Inertia right before the request is sent. |
onCancel Type: (() => void) | Lifecycle hook invoked by Inertia when a request is cancelled. |
onCancelToken Type: ((cancelToken: unknown) => void) | Receives the Inertia cancel token source when a request is initiated. Can be used to cancel the request.
Typed platform-agnostically (matching BbButton) so the library's types never require |
onError Type: ((errors: Record<string, string>) => void) | Inertia's hook for a VALIDATION error answer (the 422 path): the only failure callback The only failure callback an Inertia link accepts, and it fires on validation errors (422) — not on 5xx and not on a request that never arrived. Use an explicit visit or a form when you have to tell those apart. |
onFinish Type: (() => void) | Lifecycle hook invoked by Inertia after the request has finished (regardless of success or error). |
only Type: string[] | Limits the properties that are preserved in Inertia partial reloads. |
onPrefetched Type: (() => void) | Lifecycle hook invoked by Inertia when a prefetch for this link has completed and is cached. |
onPrefetching Type: (() => void) | Lifecycle hook invoked by Inertia when a prefetch for this link starts. |
onProgress Type: ((progress: { percentage: number | undefined; }) => void) | Progress callback invoked by Inertia with the upload/download percentage when available. |
onStart Type: (() => void) | Lifecycle hook invoked by Inertia when a request starts. |
onSuccess Type: (() => void) | Lifecycle hook invoked by Inertia when a request succeeds. |
pageProps Type: Record<string, unknown> | ((currentProps: Record<string, unknown>, sharedProps: Record<string, unknown>) => Record<string, unknown>) | null | Inertia: props to merge into the next page optimistically, before the server responds. Either an object or a function of the current props.
Typed platform-agnostically (matching BbButton) so the library's types never require |
prefetch Type: string | boolean | string[] | Inertia: fetch and cache this link's page ahead of the click. |
preserveScroll Type: boolean | ((props: Record<string, unknown>) => boolean)Defaultfalse | Controls whether Inertia should preserve the current scroll position after navigation. Can be a boolean or a predicate receiving the visit props. Inertia only. The usual case is a link inside a long list whose result renders in place — without it the visit lands at the top of the page. See example |
preserveState Type: boolean | ((props: Record<string, unknown>) => boolean) | nullDefaultfalse | Controls whether Inertia should preserve the current state after navigation. Can be a boolean or a predicate receiving the visit props. |
preserveUrl Type: booleanDefaultfalse | Inertia: keep the current URL in the address bar even though the page content changes. |
pt Type: PtMap<"root", BbBaseButtonPtState> | Passthrough, object form: the same keys as the |
pt:<part> Type: PtValue | Passthrough, attribute form: one attribute per part, |
queryStringArrayFormat Type: "brackets" | "indices"Default'brackets' | Format to use when serializing array values into the query string for Inertia requests. |
rel Type: string | Relationship between the current document and the linked resource. Useful for security when opening new tabs (e.g. Your tokens are preserved; the security ones are added on top whenever a |
replace Type: booleanDefaultfalse | Uses history replacement instead of push navigation.
- With Vue Router ( Swaps the current history entry instead of pushing one, under both Vue Router and Inertia. Right for anything that is a view control rather than a step in the user's journey. See example |
tag Type: ButtonTagDefault'button' | Element of the plain (non-link) button: A last resort for contexts where a |
target Type: string | Target browsing context for anchor/Inertia links (e.g. Forces a plain anchor even where routing would otherwise apply. Any value other than |
text Type: string | Fallback text content rendered when no default slot is provided. A string-only fallback for loops that spread a config object. Prefer the default slot: slot content wins when both are present. See example |
to Type: string | wt | bt | Route location to navigate to. When provided (and not disabled), the component renders as a Vue Router link. The router form, and the only one that stays inside a Vue Router or Nuxt application. It needs a router to resolve against: in a router-free page it renders nothing useful, and |
type Type: "button" | "submit" | "reset"Default"button" | Native Defaults to |
viewTransition Type: booleanDefaultfalse | Inertia: run the page swap inside a View Transition, where the browser supports one. |
Slots
The listed properties are the ones exposed to the slot scope.
| Name | Description |
|---|---|
default Type: BbLinkSlotProps | Primary content rendered inside the button element. Falls back to the The label. For a rich card overlay, keep it short and visually hidden ( |