Skip to content

BbBaseButton

Unstyled button/link primitive: element resolution (button/anchor/router link) and the full navigation engine, with no visual chrome. Use for any clickable or navigable surface that is not a variant-first BbButton — cards, list rows, custom links.

import { BbBaseButton } from 'bitboss-ui';

On this page

Props

NameDescription
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 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.

See example
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 display: block so the width applies. 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.

See example
cacheFor Type: string | number | (string | number)[]

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.

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 href in an Inertia-enabled app. Ignored when not using Inertia.

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

See example
disabled Type: booleanDefaultfalse

Disables user interaction. A native button gets the disabled attribute; a link (anchor/Inertia) loses href, gets aria-disabled="true" and tabindex="-1", and never navigates: still announced as a link, but out of the tab order.

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.

See example
download Type: string | boolean

Marks an href link as a download: a plain <a download> with a native navigation (never an Inertia or router visit), so blob: and data: files work too. A string sets the suggested filename.

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.

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

See example
except Type: string[]

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

external Type: booleanDefaultfalse

Forces an href link to render as a plain <a> (native navigation), bypassing Inertia/router interception, as Nuxt's NuxtLink external does. For links outside the SPA; a native-anchor signal 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.

See example
headers Type: object

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

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

See example
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 href is provided in an Inertia-enabled app. Ignored otherwise: an Inertia POST visit is href="/orders/5/archive" method="post", never to (a to link is a Vue Router link and sends no method).

Inertia only, and only with href: it turns that link into a non-GET visit. A to link is a router link and sends no method (the ESLint rule bitboss-ui/require-partner-prop flags it). In a Vue Router or plain application it is ignored — an href is always a GET.

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

onError Type: ((errors: Record<string, string>) => void)

Inertia's hook for a VALIDATION error answer (the 422 path): the only failure callback Link accepts. onHttpException (5xx) and onNetworkError are router.visit() / useForm() options, never Link props.

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

prefetch Type: string | boolean | string[]

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').

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:* attributes without the prefix. See the pt:<part> row.

pt:<part> Type: PtValue

Passthrough, attribute form: one attribute per part, pt:<part>, and per part and state, pt:<part>:<state>. Parts: root. States: activeLink, disabled, exactActiveLink.

See example
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. 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.

replace Type: booleanDefaultfalse

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.

See example
tag Type: ButtonTagDefault'button'

Element of the plain (non-link) button: 'button' (default), 'div' / 'span' (a clickable box inside a button or link) or 'label' (a file-upload trigger). Ignored with href / to. Off button, native type / disabled drop (disabled stays a 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.

See example
target Type: string

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.

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

See example
type Type: "button" | "submit" | "reset"Default"button"

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.

See example
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.

NameDescription
default Type: BbLinkSlotProps

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.

See example