Skip to main content
Button component with multiple visual variants and built-in loading/success states. Supports animated loading and success animations using Lottie.

​
Import

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

​
Usage

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

function App() {
  return (
    <Button design="primary">
      Submit
    </Button>
  );
}

​
Design Variants

​
Primary

Main action button with solid background color. Use for primary CTAs.

​
Secondary

Less prominent button for secondary actions.

​
Text

Minimal styling for tertiary actions or links.

​
Image

Icon-only button without text label.

​
Call to Action

Prominent CTA button with special styling.

​
Props

​
design
'primary' | 'secondary' | 'text' | 'image' | 'call-to-action'
default:"primary"
Visual variant of the button. Use primary for main actions, secondary for less emphasis, text for minimal style, image for icon-only, and call-to-action for prominent CTAs.
​
size
'small' | 'normal'
default:"normal"
Button size. Use small for compact layouts.
​
icon
React.ReactElement
Icon element to display alongside the button text.
​
iconPosition
'left' | 'right'
default:"left"
Position of the icon relative to the button text.
​
loading
boolean
default:"false"
Shows animated loading spinner (Lottie animation) when true. Button is disabled during loading state.
​
disabled
boolean
default:"false"
Disables the button and reduces opacity.
​
success
boolean
default:"false"
Triggers success animation (Lottie checkmark). Button shows animated checkmark when true.
​
animationDelay
number
default:"600"
Delay in milliseconds before showing loading animation.
​
animationTime
number
default:"300"
Duration in milliseconds for success animation before callback.
​
countdown
number
Time in seconds to display countdown on button. Button is disabled during countdown.
​
onSuccess
(success: boolean) => void
Callback fired when success animation completes.
​
onCountdownEnd
() => void
Callback fired when countdown reaches zero.

​
Additional Props

The Button component extends all native HTML button attributes (onClick, type, disabled, className, style, etc.).

​
Examples

​
Small Button

<Button design="primary" size="small">
  Save
</Button>

​
With Countdown

<Button 
  design="primary" 
  countdown={5}
  onCountdownEnd={() => console.log('Countdown finished!')}
>
  Resend Code
</Button>

​
Image Button (Icon Only)

import { X } from 'lucide-react';

<Button design="image" icon={<X />} />

Build docs developers (and LLMs) love

Get started for freeTalk to us