FluiKitFeedback

FluiKitFeedback renders operation feedback as an inline alert or modal dialog.

FluiKit controls this component automatically after create, update, delete, row action, bulk action, and toolbar action flows.

Props

type FluiKitFeedbackMessage = {
  status: "success" | "error" | "warning";
  title: string;
  message: string;
};

type FluiKitFeedbackProps = {
  schema: NormalizedFluiKitConfig;
  feedback: FluiKitFeedbackMessage | null;
  mode?: "inline" | "modal";
  className?: string;
  onClose?: () => void;
};

Default behavior

If feedback is null or schema.feedback.enabled is false, the component renders nothing.

mode defaults to modal.

Default status icons are:

Status	Icon
`success`	`mdi:check-circle-outline`
`error`	`mdi:alert-circle-outline`
`warning`	`mdi:alert-outline`

Schema-level icons override these defaults through schema.feedback.icons.

Inline mode

Inline mode renders an alert/status block in the normal layout flow.

schemas/users/users.schema.ts

export const usersSchema = {
  version: "1.0.0",
  resource: "users",
  feedback: {
    enabled: true,
    mode: "inline"
  }
} as const;

app/users/feedback-preview.tsx

TSX

"use client";

import { FluiKitFeedback, normalizeSchema } from "@vibeflui/core";
import { usersSchema } from "@/schemas/users/users.schema";

const schema = normalizeSchema(usersSchema);

export function FeedbackPreview() {
  return (
    <FluiKitFeedback
      schema={schema}
      mode="inline"
      feedback={{
        status: "success",
        title: "Saved",
        message: "The user has been updated."
      }}
    />
  );
}

Modal mode renders FluiKitModal with a centered status icon and an OK button.