Feedback Modal

User feedback collection modal with rating and comment features. Perfect for gathering user opinions, ratings, and suggestions.

Features

Star rating system (1-5 stars)
Optional comment/feedback text area
Form validation and submission
Loading states during submission
Accessible form controls
Customizable labels and placeholders

Example

Share Your Feedback

Click the button below to open the feedback modal. You can rate your experience and optionally leave a comment.

Usage

import { FeedbackModal } from '@/components/ui/templates/modal'

function MyComponent() {
  const [isOpen, setIsOpen] = useState(false)
  
  const handleSubmit = (feedback: {
    rating: number
    comment?: string
  }) => {
    console.log('Feedback submitted:', feedback)
    // Send to API
    setIsOpen(false)
  }
  
  return (
    <>
      <Button onClick={() => setIsOpen(true)}>
        Give Feedback
      </Button>
      
      <FeedbackModal
        isOpen={isOpen}
        onClose={() => setIsOpen(false)}
        onSubmit={handleSubmit}
      />
    </>
  )
}

Props

Prop	Type	Default	Description
isOpen	boolean	-	Controls modal visibility
onClose	() => void	-	Callback when modal is closed
onSubmit	(feedback) => void	-	Callback with rating and optional comment
isLoading	boolean	false	Shows loading state on submit button
title	string	'Share Your Feedback'	Modal title text