Buttons

Usage examples, variants, sizes, states, and best practices.

Variants

variant'default' | 'outline' | 'ghost' | 'destructive' | 'secondary'

Default: 'default'

Visual style of the button

Default: 'default'

Button size and padding

rounded'none' | 'sm' | 'default' | 'lg' | 'xl' | 'full'

Default: 'default'

Border radius amount

elevation'none' | 'sm' | 'default' | 'md' | 'lg' | 'xl'

Default: 'none'

Shadow depth for elevation effect

fullWidthboolean

Default: false

Make button take full container width

loadingboolean

Default: false

Show loading spinner and disable interaction

loadingTextstring

Default: undefined

Text to show when button is in loading state

disabledboolean

Default: false

Disable the button

startIconReactNode

Default: undefined

Icon element to display before text

endIconReactNode

Default: undefined

Icon element to display after text

rippleboolean

Default: true

Enable ripple effect on click