Button

A clickable control that triggers an action, supporting nine visual variants and five sizes.

Installation

npx dafink-ui add button

Demos

Arrow buttons

Use the arrowleft and arrowright variants to build prev/next controls. The arrow is injected automatically; just pass the label as children.

Props

Name	Type	Default	Description
variant	"primary" \| "secondary" \| "outlined" \| "ghost" \| "link" \| "destructive" \| "arrowleft" \| "arrowright" \| "on-color"	"primary"	Visual style of the button. "arrowleft"/"arrowright" prepend or append a sliding arrow, for prev/next controls. "on-color" uses currentColor instead of a fixed brand color, for controls embedded inside colored content.
size	"sm" \| "md" \| "lg" \| "icon" \| "icon-sm"	"md"	Height and padding. "icon"/"icon-sm" render a square (36px/28px) with no horizontal padding. Requires aria-label when there is no visible text.
shape	"default" \| "circle"	"default"	"circle" renders rounded-full instead of the default corner radius. Pair with an icon size for a true circle.
loading	boolean	false	Shows a spinner, disables the button, and sets aria-busy="true". Children are hidden while loading.
href	string	-	Renders as a Next.js Link instead of a button. All variants and sizes work the same; loading and disabled are ignored in this mode.
disabled	boolean	false	Disables the button and suppresses all pointer and focus interaction.
className	string	""	Additional Tailwind classes merged onto the button element.

Accessibility

Button renders a native <button>, so it sits in normal Tab order and Enter/Space activate it with no extra JS; when href is passed it renders a Next.js Link instead, so only Enter (not Space) activates it, matching native anchor behavior. loading sets both aria-busy="true" and disabled. Icon-only sizes (icon, icon-sm) require an aria-label since none is supplied automatically. No roving tabindex or arrow-key behavior.

Key	Function
`tab`	Moves focus to the button (or the rendered link, when href is set) in normal document order.
`shift`+`tab`	Moves focus to the previous tabbable element.