Skip to main content

​
Feedback

Toast-style feedback notification with slide-in/out animation. Auto-dismisses after specified duration. Supports success, error, and custom types.

​
Import

import { Feedback } from '@adoptaunabuelo/react-components';

​
Props

​
isVisible
boolean
required
Controls visibility (triggers show/hide animation)
​
type
'success' | 'error' | 'custom'
required
Visual variant: success (green with check), error (red with X), custom (use your own icon/color)
​
text
string
required
Message text to display
​
icon
React.ReactNode
Custom icon for type="custom"
​
closeAfter
number
default:"3000"
Auto-dismiss duration in milliseconds (default: 3000)
​
showClose
boolean
Show manual close button
​
onClose
() => void
Callback fired when dismissed (auto or manual)
​
style
React.CSSProperties
Custom styles for the container (e.g., custom background for type=“custom”)

​
Usage

<Feedback
  type="success"
  text="Changes saved successfully"
  isVisible={showFeedback}
  closeAfter={5000}
  onClose={() => setShowFeedback(false)}
/>

​
Notes

  • Positioned fixed at bottom-left of screen
  • Slide-in animation from scale(0,0) to scale(1,1)
  • Auto-dismisses after closeAfter milliseconds
  • Success type uses green background with white Check icon
  • Error type uses red background with white X icon
  • Custom type requires icon prop and respects style.background
  • Close button appears in top-right corner when showClose is true
  • Component only renders when isVisible has been true at least once

Build docs developers (and LLMs) love

Get started for freeTalk to us