Feedback Action

Renders a button with animated feedback states for error and loading. It shows a message and icon, and allows retrying with a spinning action. It uses motion animations for transitions and layout changes. Use it to provide visual feedback and a retry option in forms or data loading scenarios.

byWatermelon Corp from Watermelon

Installation

terminal

pnpm dlx layro-cli add @watermeloncorp/feedback-action

npx layro-cli add @watermeloncorp/feedback-action

npx layro-cli add @watermeloncorp/feedback-action

bunx layro-cli add @watermeloncorp/feedback-action

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

import React, { useState, useEffect } from 'react';
import { motion, AnimatePresence, MotionConfig } from 'motion/react';
import { LuCircleDotDashed } from 'react-icons/lu';
import { FaArrowRotateRight } from 'react-icons/fa6';
import { TbAlertOctagonFilled } from 'react-icons/tb';
import { cn } from '@/lib/utils';

interface InlineFeedbackProps {
  errorMessage?: string;
  loadingMessage?: string;
  onRetry?: () => void;
}

export const FeedbackAction: React.FC<InlineFeedbackProps> = ({