patterns

FeedbackButton

Topbar feedback affordance — a button that opens a textarea dialog. v1 is free text + current path; the prop contract leaves room for AI-driven mood / category fields without changing the visible surface.

Install

Pull this component (and its dependencies) straight into your app via the shadcn CLI:

npx shadcn@latest add https://design.oapps.io/r/feedback-button.json

Or import from the workspace package:

import { FeedbackButton, FeedbackPayload } from "@8maverik8/design";

Examples

Default

<FeedbackButton
  onSubmit={async (payload) => {
    await fetch("/api/feedback", {
      method: "POST",
      body: JSON.stringify(payload),
    });
  }}
/>

Guidelines

Wire `onSubmit` to your ticketing / Slack / LLM pipeline. Throw to surface an inline error.
Replace the button label with something product-specific."Feedback" is the convention across all apps — making it Slack-able universal vocabulary.