Skip to content
Pinky UI

feedback

Inline Feedback

Local success, warning, info and error feedback beside the action that caused it.

  • feedback
  • validation
  • forms

Live preview

Saved locally

Quick usage

usage
import { InlineFeedback } from "@pinky-ui/systems";

<InlineFeedback tone="success">Saved</InlineFeedback>

Install

Add @pinky-ui/systems as a dependency, or use the CLI to copy this component's source directly into your project — no dependency to manage, fully editable.

shell
npm install @pinky-ui/systems

Prefer to run the whole repository locally instead?

repository
git clone https://github.com/florash/Pinky-UI.git
cd Pinky-UI
npm install
npm run dev

Accessibility

  • Pointer and keyboard paths expose the same state change.
  • Status and focus remain meaningful when motion is disabled.

Performance

  • Uses local state and transforms; no per-frame React pointer loop.

Reduced motion

Resolves state changes without layout animation while preserving semantics.

When to use

  • Product workflows with a clear reversible or inspectable state.

When not to use

  • Decorative motion without a user task.

Skill

Purpose

Use for a small local response beside the field or action that caused it.

Use when

The user needs to know that a value saved, copied, failed validation, or recovered.

Avoid

Global announcements for local changes or messages that disappear before they can be read.

Accessibility

Use status for non-urgent confirmation and alert for errors; associate invalid text with the control.

Keyboard and touch

Dismiss and recovery controls must be native buttons and remain reachable without pointer hover.

Reduced motion and performance

Keep layout stable and avoid per-keystroke animation; state changes should remain immediate.

Composition and anti-patterns

Escalate to Toast or Undo Bar only when the user has left the local context.

Open this skill on its own page