Button

Button component with multiple visual variants and built-in loading/success states.

Import

import { Button } from '@adoptaunabuelo/react-components';

Props

design

'primary' | 'secondary' | 'text' | 'image' | 'call-to-action'

default:"primary"

Visual variant: primary for main actions, secondary for less emphasis, text for minimal style, image for icon-only, call-to-action for prominent CTAs

size

'small' | 'normal'

default:"normal"

Button size: normal (default) or small for compact layouts

icon

React.ReactElement

Icon element to display alongside button text

iconPosition

'left' | 'right'

Position of the icon relative to text

boolean

Shows animated loading spinner (Lottie animation)

disabled

boolean

Disables button interaction

success

boolean

Triggers success animation (Lottie checkmark)

animationDelay

number

Delay in milliseconds before showing loading animation

animationTime

number

Duration in milliseconds for success animation before callback

countdown

number

Time in seconds to display countdown on button

onSuccess

(success: boolean) => void

Callback fired when success animation completes

onCountdownEnd

() => void

Callback fired when countdown reaches zero

Usage

<Button design="primary" loading={isLoading}>
  Submit
</Button>

Notes

Loading and success states use Lottie animations
Button supports all standard HTML button attributes
design="image" is typically used for icon-only buttons
Countdown feature displays remaining seconds on the button

Components

Constants

Button

Button

Import

Props

Usage

Notes

Build docs developers (and LLMs) love

Components

Constants

​Button

​Import

​Props

​Usage

​Notes

Build docs developers (and LLMs) love

Button

Import

Props

Usage

Notes