Feedback
Show lightweight animated feedback relative to a trigger with composable placement and content transitions.
Installation
Usage
Feedback pairs a trigger element with animated contextual messaging. Render Feedback.Content inside Feedback.Root, and control visibility with the show prop. The same pattern also works for simple chained status updates, moving from an in-progress message to a confirmed state while the same trigger stays visible.
Examples
Different Positions
Place the feedback above, below, left, or right of the trigger with the position prop.
Synced
Queued
Saved
Draft
API Reference
Feedback.Root
Wraps the trigger and provides visibility, placement, and transition settings to Feedback.Content.
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | required | Trigger element and Feedback.Content |
show | boolean | false | Controls whether the feedback is shown |
position | "bottom" | "top" | "left" | "right" | "bottom" | Positions the feedback relative to the trigger |
className | string | none | Additional classes for the root wrapper |
transition | { stiffness?: number; damping?: number } | { stiffness: 300, damping: 20 } | Spring config for the container animation |
Feedback.Content
Renders the animated feedback message. This component must be used within Feedback.Root.
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | required | Content displayed in the feedback bubble |
className | string | none | Additional classes for the positioned container |
contentKey | string | number | derived from children | Stable key used to animate between different messages |
mode | "crossfade" | "slide-up" | "slide-down" | "slide-up" | Controls how content inside the bubble transitions |