Button

Versatile button with variants, sizes, loading state, and icon support.

Installation

npx shadcn@latest add https://fluid-functionalism.vercel.app/r/button.json

Variants

Sizes

With Icons

Loading & Disabled

API Reference

PropTypeDefaultDescription
variant"primary" | "secondary" | "tertiary" | "ghost""primary"Visual style of the button.
size"sm" | "md" | "lg" | "icon-sm" | "icon" | "icon-lg""md"Size of the button.
loadingbooleanfalseShows a spinner and disables the button.
leadingIconLucideIconIcon displayed before the label.
trailingIconLucideIconIcon displayed after the label.
asChildbooleanfalseMerge props onto the child element instead of rendering a <button>.
disabledbooleanfalseDisables the button.