Crea un botón «Magnético Coral» listo para producción usando React, TypeScript, Tailwind CSS, shadcn/ui, Framer Motion e iconos Lucide. Muestra el texto «Get started» con…
Componente · Botones
Botón Éxito Esmeralda
Prompt
Crea un botón «Éxito Esmeralda» listo para producción usando React, TypeScript, Tailwind CSS, shadcn/ui, Framer Motion e iconos Lucide. Muestra el texto «Complete order» con tratamiento success, forma cut, icono download, color principal #ef4444, secundario #f472b6 y fondo #fff1f2. Incluye estados default, hover, focus-visible, activo, carga, éxito, deshabilitado y protección para acciones destructivas. Soporta semántica button y anchor, iconos a izquierda/derecha, modo solo icono, tamaños, ancho completo, acciones asíncronas y prevención de clics duplicados. Anima transform y opacity sin layout shift; respeta prefers-reduced-motion. Exige teclado, nombre accesible, aria-busy, contraste WCAG AA y área táctil de 44px. Devuelve variantes tipadas, componente reutilizable, demo, dependencias y pruebas.
- Tipo
- Componente · Botones
- Tecnología
- React, TypeScript, Tailwind CSS, shadcn/ui
- Button
- success
- cut
- Accessible
- CTA
«Crear en Drommo» abre un chat en el modo correcto con el prompt ya escrito. No se envía hasta que tú lo mandes.
Ideas parecidas
Crea un botón «Brutalista Mono» listo para producción usando React, TypeScript, Tailwind CSS, shadcn/ui, Framer Motion e iconos Lucide. Muestra el texto «SUBMIT NOW» con…
Crea un botón «Suave Lavanda» listo para producción usando React, TypeScript, Tailwind CSS, shadcn/ui, Framer Motion e iconos Lucide. Muestra el texto «Continue» con tratamiento…
Crea un botón «Scanline Cyber» listo para producción usando React, TypeScript, Tailwind CSS, shadcn/ui, Framer Motion e iconos Lucide. Muestra el texto «Initialize» con…
Crea un botón «Empresarial Azul» listo para producción usando React, TypeScript, Tailwind CSS, shadcn/ui, Framer Motion e iconos Lucide. Muestra el texto «Request demo» con…
Crea un botón «Brillo Rosa» listo para producción usando React, TypeScript, Tailwind CSS, shadcn/ui, Framer Motion e iconos Lucide. Muestra el texto «Shop the edit» con…
Crea un botón «Carrito Solar» listo para producción usando React, TypeScript, Tailwind CSS, shadcn/ui, Framer Motion e iconos Lucide. Muestra el texto «Add to cart» con…
Crea un botón «Minimalista Slate» listo para producción usando React, TypeScript, Tailwind CSS, shadcn/ui, Framer Motion e iconos Lucide. Muestra el texto «Learn more» con…