Feedback Bar

A small bar that asks for a quick reaction to a response.

Anatomy

A horizontal pill with a leading icon, a short prompt, and an action cluster on the right. The bar owns its open state and unmounts when dismissed, so the call site can drop it next to a message and let it disappear on its own. Only the dismiss is wired. The reaction buttons stay plain so the caller can attach any handler without the component getting in the way.

TSX

For flows that want to keep the bar in the tree after a reaction, wire open and onOpenChange from the outside. The dismiss still fires onOpenChange(false), the caller decides what to do.

API

Reference for each part of the component, including its available props and behavior.

FeedbackBar

Root. Owns the open state. Accepts open for the controlled flow, defaultOpen for the uncontrolled flow, and onOpenChange to mirror the value. Renders nothing when closed.

Prop

FeedbackBarIcon

The leading mark. Sized to match the prompt text and tinted muted by default. Pass any icon as children.

Prop

FeedbackBarContent

The prompt slot. A single line of text in the foreground color, set to take the leading space so the action cluster can sit at the trailing end.

Prop

FeedbackBarAction

The trailing cluster. A flex row with a tight gap, sized to fit icon-only buttons. Drop in any combination of reaction buttons followed by FeedbackBarDismiss.

Prop

FeedbackBarDismiss

Headless trigger that closes the bar. Pass the visual button via render. The trigger calls the caller's onClick first, then sets open to false. Call event.preventDefault() inside the handler to block the auto-close, for flows that need to persist a reaction first and then close from outside.

Prop