VVibeFlui

Feedback Schema

feedback describes how VibeFlui displays action and endpoint results.

Feedback schema controls UI presentation. Backend responses provide the actual status and message.

Feedback shape

schemas/users/user-feedback.schema.ts

TS
export const feedbackSchema = {
  version: "1.0.0",
  resource: "users",
  feedback: {
    enabled: true,
    mode: "modal",
    className: "vibeflui-feedback",
    icons: {
      success: "lucide:circle-check",
      error: "lucide:circle-x",
      warning: "lucide:triangle-alert"
    }
  }
} as const;

Feedback properties

PropertyTypePurpose
enabledbooleanEnables or disables feedback rendering.
mode"inline" | "modal"Controls feedback placement.
classNamestringStyling hook.
iconsobjectIconify keys for success, error, and warning states.

Backend response contract

VibeFlui feedback should read backend-style responses with status, code, and message.

JSON
{
  "status": true,
  "code": 200,
  "message": "Saved successfully"
}
JSON
{
  "status": false,
  "code": 422,
  "message": "Email is already used"
}
JSON
{
  "status": false,
  "code": 409,
  "message": "Manager approval is required"
}

Status mapping

For the simplest backend contract, return status: true or status: false with code. VibeFlui also accepts recognized string statuses.

Backend statusFeedback outcomeVisual tone
trueSuccessGreen
false with 400..499 codeWarningOrange
false with 500+ code or no warning codeErrorRed
"accepted", "ok", "success"SuccessGreen
"rejected", "warning"WarningOrange
"failed", "error"ErrorRed

Inline feedback

schemas/users/inline-feedback.schema.ts

TS
export const inlineFeedbackSchema = {
  version: "1.0.0",
  resource: "users",
  feedback: {
    enabled: true,
    mode: "inline",
    icons: {
      success: "lucide:circle-check",
      error: "lucide:circle-x",
      warning: "lucide:triangle-alert"
    }
  }
} as const;

schemas/users/modal-feedback.schema.ts

TS
export const modalFeedbackSchema = {
  version: "1.0.0",
  resource: "users",
  feedback: {
    enabled: true,
    mode: "modal"
  }
} as const;