Button

Triggers an action or event. Supports five visual variants and four sizes, with built-in loading, icon, and as-link states.

Props

variant= 'primary'

'primary' | 'secondary' | 'ghost' | 'soft' | 'link'

Visual style of the button.

size= 'md'

'sm' | 'md' | 'lg' | 'xl'

Controls height and padding.

isLoading= false

boolean

Shows a spinner and disables interaction.

icon

ReactNode

Renders a square icon-only button when provided without children. Set aria-label for accessibility.

leftIcon

ReactNode

Icon rendered before the label.

rightIcon

ReactNode

Icon rendered after the label.

asChild= false

boolean

Merges props onto the child element — use with an <a> or Next.js Link to render a link styled as a button.

disabled

boolean

Disables the button.

children

ReactNode

Button label content.

Prop	Type	Default	Description
variant	'primary' \| 'secondary' \| 'ghost' \| 'soft' \| 'link'	'primary'	Visual style of the button.
size	'sm' \| 'md' \| 'lg' \| 'xl'	'md'	Controls height and padding.
isLoading	boolean	false	Shows a spinner and disables interaction.
icon	ReactNode	—	Renders a square icon-only button when provided without children. Set aria-label for accessibility.
leftIcon	ReactNode	—	Icon rendered before the label.
rightIcon	ReactNode	—	Icon rendered after the label.
asChild	boolean	false	Merges props onto the child element — use with an <a> or Next.js Link to render a link styled as a button.
disabled	boolean	—	Disables the button.
children	ReactNode	—	Button label content.