Follow for updates
All Components
Dynamic Scroll Island TOCSub Select ToggleCool checkboxAnimated Blur TestimonialsFamily status indicatorSquishy 3D ButtonGooey MenuSwipeable sheets

Family like dynamic status indicator

This button delivers epic animated flair loading rings, shake-on-danger, and green-check triumph handcrafted with Motion. Tweak thy texts or icons, and thou shalt delight users with buttery-smooth transitions.




Installation


Understanding the Component

State-Driven Rendering

Determines which icon or text to show based on the variant prop.

  • renderIcon() returns a spinner, shake icon, check icon, or a custom icon.
  • renderTxt() picks the appropriate state label or falls back to children.

Text Transitions

Animates text entering and exiting with sliding and fading effects.

  • Slides in from the right and out to the left.
  • Uses the tAni motion variants for initial, animate, and exit stages.

Icon Animations

Applies distinct animations to each state’s icon.

  • Loading: continuous 360° rotation of an SVG circle.
  • Error: horizontal shake animation on the alert icon.
  • Success: static check icon with no motion.

Motion Wrapper

Wraps the button in MotionConfig to apply the transition prop across all animations.

Props

PropTypeDefaultDescription
variant"loading" | "error" | "success"noneSelects the button’s state and styling.
childrenReact.ReactNodenoneContent displayed when no variant is active.
iconReact.ReactNodenoneCustom icon to render in the default state.
transitionTransition{ type: "spring", duration: 0.6, bounce: 0.4 }Motion transition settings for all animations.
classNamestringnoneAdditional CSS classes for the button container.
text{ error?: string; loading?: string; success?: string }noneOverride default labels for each variant state.

Swipeable sheets

Swipeable sheets with native like feel

Gooey Menu

Simple Menu with svg gooey effect