BbBaseButton

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.

Value forwarded to the aria-current attribute when the component renders as a router link and the target route is an exact match. Use to communicate the current location to assistive technologies.

Defaults to page, which is right for navigation. Reach for step or location only when the link set is a wizard or a map, not a set of pages.

Inertia: runs the visit without blocking — the page stays interactive and several async visits can be in flight at once.

Makes the component take the full available width (block-level layout). Adds the bb-base-button--block modifier class.

Adds bb-base-button--block and nothing else. A flex column already stretches its children, so check the parent before reaching for this.

Inertia: how long a prefetched response stays fresh before it is re-fetched. A single duration, or [staleAfter, expiresAfter]. Typed platform-agnostically (matching BbButton) so the library's types never require @inertiajs/vue3 to be installed.

Inertia: tags to file this visit's prefetch cache under, so a later request can invalidate the whole tagged group.

Inertia: the page component this visit resolves to. Rarely set by hand — the server normally decides it.

Request payload forwarded to Inertia when navigating via href in an Inertia-enabled app. Ignored when not using Inertia.

Inertia only: the payload sent with the visit. Ignored outside Inertia.

Disables user interaction. - When rendering as a native button, sets the disabled attribute. - When rendering as a link (anchor/Inertia), removes href, adds aria-disabled="true", and prevents navigation while keeping focusable semantics consistent.

Adapts to the element: the native attribute on a button, and on a link the href is dropped for role="link" + aria-disabled="true" + tabindex="-1". Either way you get the bb-base-button--disabled class to style.

Marks an href link as a download. Renders a plain <a download> doing a native navigation — never an Inertia/router visit — so file downloads (including same-origin, blob: and data: URLs) work. Pass a string to set the suggested filename. One of the native-anchor signals alongside target and external.

Always a native anchor navigation, never a router or Inertia visit, which is what makes blob: and data: URLs work. Pass a string to suggest the filename.

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 aria-current. A fragment-only href never matches: it is the page the reader is already on.

Inertia: the inverse of only — properties to EXCLUDE from a partial reload. Pass one or the other, not both.

Forces an href link to render as a plain <a> (native navigation), bypassing Inertia/router interception — the same intent as Nuxt's NuxtLink external. Use for links outside the SPA. One of the native-anchor signals alongside target and download.

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 NuxtLink external.

Additional HTTP headers forwarded to Inertia when navigating via href in an Inertia-enabled app.

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 href without target becomes a visit instead; under Vue Router or Nuxt it stays a full page load, so to is the prop for internal links there.

Inertia: navigate optimistically on click and reconcile when the response lands, instead of waiting for the round trip.

HTTP method used for Inertia navigation when href is provided in an Inertia-enabled app. Ignored otherwise.

Inertia only, and it turns a link into a non-GET visit. In a Vue Router or plain application it is ignored — an href is always a GET.

Lifecycle hook invoked by Inertia right before the request is sent.

Lifecycle hook invoked by Inertia when a request is cancelled.

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 @inertiajs/vue3 to be installed.

Lifecycle hook invoked by Inertia when the server responds with VALIDATION errors — the ordinary 422 path. This is the only failure callback Inertia's Link accepts. onHttpException (server answered 5xx) and onNetworkError (the request never arrived) are router.visit() / useForm() options, NOT Link props — declaring them here would only paste bogus listeners onto the anchor. Use a form or an explicit visit when you need to tell them apart.

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.

Lifecycle hook invoked by Inertia after the request has finished (regardless of success or error).

Limits the properties that are preserved in Inertia partial reloads.

Lifecycle hook invoked by Inertia when a prefetch for this link has completed and is cached.

Lifecycle hook invoked by Inertia when a prefetch for this link starts.

Progress callback invoked by Inertia with the upload/download percentage when available.

Lifecycle hook invoked by Inertia when a request starts.

Lifecycle hook invoked by Inertia when a request succeeds.

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 @inertiajs/vue3 to be installed.

Inertia: fetch and cache this link's page ahead of the click. true uses the default trigger; a string or list of strings picks them ('mount', 'hover', 'click').

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.

Controls whether Inertia should preserve the current state after navigation. Can be a boolean or a predicate receiving the visit props.

Inertia: keep the current URL in the address bar even though the page content changes.

Passthrough, object form: the same keys as the pt:* attributes without the prefix. See the pt:<part> row.

Format to use when serializing array values into the query string for Inertia requests.

Relationship between the current document and the linked resource. Useful for security when opening new tabs (e.g. noopener noreferrer).

Your tokens are preserved; the security ones are added on top whenever a target is set. There is rarely a reason to write noopener here yourself.

Uses history replacement instead of push navigation. - With Vue Router (to), calls router.replace. - With Inertia (href), performs a replace visit.

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.

Element to render for the plain (non-link, non-router) button: - 'button' (default) — real button semantics and keyboard behavior - 'div' / 'span' — a clickable box nested inside another button or link, where a nested <button> would be invalid markup - 'label' — a file-upload trigger wrapping a visually hidden <input> Ignored when the component renders as a link/router (href/to) — those always render <a>/router-link. When set to a non-button tag the native type/disabled attributes are dropped (they're invalid off a <button>); disabled state is still conveyed via the bb-base-button--disabled class.

A last resort for contexts where a <button> is invalid — nested inside another interactive element, or a <label> wrapping a hidden file input. A non-button tag loses the native type and disabled attributes and the keyboard semantics that come with them.

Target browsing context for anchor/Inertia links (e.g. _self, _blank). Ignored when rendering as a native button.

Forces a plain anchor even where routing would otherwise apply. Any value other than _self gets rel="noopener noreferrer" merged in — named windows included, because a named target also leaves window.opener pointing back at your page.

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.

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 href is the form that works.

Native type attribute used when rendering as a button (e.g. button, submit, reset).

Defaults to button, so nothing inside a form submits by accident. Dropped entirely when tag is not button, where the attribute would be invalid.

Inertia: run the page swap inside a View Transition, where the browser supports one.

Primary content rendered inside the button element. Falls back to the text prop when empty.

The label. For a rich card overlay, keep it short and visually hidden (Open Acme workspace) instead of making the entire card the link name.