Dot Morph Button

Button with morphing dots for progress/confirmation.

~9.8 kB

Last updated: March 7, 2026

Installation

npx smoothui-cli add dot-morph-button

npx smoothui-cli add dot-morph-button

Features

Morphing dot animations
States: idle, loading, success
Keyboard and ARIA support
Easy to theme

This component respects the prefers-reduced-motion media query via useReducedMotion from Motion. When reduced motion is preferred, the dot morph hover animation is disabled. The component also detects hover-capable devices and disables the hover effect on touch devices.

Props

Clip Corners Button

Geometric button with clipped corners and hover sheen.

Magnetic Button

Button that subtly follows the cursor with a magnetic effect.

Dot Morph Button

Installation

Features

Accessibility

Reduced Motion

Props

On this page