Button

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

Installation

npx dafink-ui add button

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

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.