Button Actions

Button actions are visible command buttons.

Use button actions for primary page commands such as create, save, export, sync, or invite.

Schema example

export const usersSchema = {
  resource: "users",
  actions: {
    toolbar: [
      {
        key: "sync",
        label: "Sync users",
        icon: "lucide:refresh-cw",
        display: "button",
        variant: "secondary",
        handler: "users.sync",
        refreshOnSuccess: true
      }
    ],
    create: {
      enabled: true,
      label: "Create user",
      icon: "lucide:plus",
      display: "button",
      variant: "primary",
      handler: "users.create"
    }
  },
  registry: {
    actionHandlers: ["users.sync", "users.create"]
  }
} as const;

Runtime registry

import { createRegistry } from "@vibeflui/core";

export const registry = createRegistry({
  actionHandlers: {
    "users.sync": async () => ({
      status: true,
      code: 200,
      message: "Users synchronized"
    }),
    "users.create": async ({ values }) => ({
      status: true,
      code: 200,
      message: `${String(values?.name ?? "User")} created`,
      data: values
    })
  }
});

Common properties

export const buttonAction = {
  key: "export",
  label: "Export",
  icon: "lucide:download",
  display: "button",
  variant: "secondary",
  handler: "users.export",
  refreshOnSuccess: false
} as const;

Variants

TXT

default
primary
secondary
danger
ghost

Use primary for the main page action. Use danger only for destructive actions.

Accessibility

Button actions should have a clear label. If the visible label is short, use tooltip or ariaLabel for clarity.