Actions
Actions describe user commands in VibeFlui schemas.
An action can open a form, call a registry handler, call an endpoint, show a confirmation dialog, emit events, refresh data after success, or display feedback from a backend-style response.
Default behavior
When actions is enabled, VibeFlui normalizes built-in actions:
| Action | Default key | Default label | Default icon | Default display | Default variant |
|---|---|---|---|---|---|
| Create | create | add data | mdi:plus | button | primary |
| Edit | edit | Edit | mdi:pencil-outline | icon | secondary |
| Delete | delete | Delete | mdi:trash-can-outline | icon | danger |
| View/detail | detail | Detail | mdi:eye-outline | icon | ghost |
Delete actions default to confirm: true.
Readonly UI mode disables create, edit, delete, row, bulk, and toolbar actions.
TS
export const readonlySchema = {
resource: "users",
uiMode: "readonly",
actions: true
} as const;Action resolution order
When an action runs, VibeFlui resolves execution in this order:
action.handlerschema.handlers[action.key]schema.handlers[operation]- configured provider
- action endpoint or schema endpoint
- no-op
Use action.handler plus registry.actionHandlers for most custom UI behavior.
Basic schema
TS
export const usersSchema = {
resource: "users",
endpoint: "/api/users",
identity: {
key: "id",
param: "id"
},
actions: {
create: {
enabled: true,
label: "Create user",
icon: "lucide:plus",
handler: "users.create"
},
edit: {
enabled: true,
label: "Edit",
icon: "lucide:pencil",
handler: "users.update"
},
delete: {
enabled: true,
label: "Delete",
icon: "lucide:trash-2",
variant: "danger",
handler: "users.delete",
confirm: true
},
row: [
{
key: "invite",
label: "Invite",
icon: "lucide:send",
handler: "users.invite"
}
],
toolbar: [
{
key: "export",
label: "Export",
icon: "lucide:download",
handler: "users.export"
}
],
bulk: [
{
key: "bulk-delete",
label: "Delete selected",
variant: "danger",
handler: "users.bulkDelete",
refreshOnSuccess: true
}
]
},
registry: {
actionHandlers: [
"users.create",
"users.update",
"users.delete",
"users.invite",
"users.export",
"users.bulkDelete"
]
}
} as const;Runtime registry
TS
import { createRegistry } from "@vibeflui/core";
export const registry = createRegistry({
actionHandlers: {
"users.create": async ({ values }) => ({
status: true,
code: 200,
message: `${String(values?.name ?? "User")} created`,
data: values
}),
"users.update": async ({ values, identityValue }) => ({
status: true,
code: 200,
message: `User ${String(identityValue)} updated`,
data: values
}),
"users.delete": async ({ identityValue }) => ({
status: true,
code: 200,
message: `User ${String(identityValue)} deleted`
}),
"users.invite": async ({ row }) => ({
status: true,
code: 200,
message: `${String(row?.email ?? "User")} invited`
}),
"users.export": async () => ({
status: true,
code: 200,
message: "Users exported"
}),
"users.bulkDelete": async ({ values }) => ({
status: true,
code: 200,
message: `${Array.isArray(values?.selectedIds) ? values.selectedIds.length : 0} users deleted`
})
}
});Action properties
| Property | Type | Purpose |
|---|---|---|
key | string | Stable action id. |
enabled | boolean | Enables or disables the action. |
label | string | Button text or accessible label source. |
icon | string | Iconify icon key. |
tooltip | string | Tooltip text. |
ariaLabel | string | Accessible label for icon-only actions. |
display | "button" | "icon" | Display preference. |
iconOnly | boolean | Shortcut for icon display. |
variant | "default" | "primary" | "secondary" | "danger" | "ghost" | Visual tone. |
confirm | boolean | object | Confirmation dialog. |
endpoint | string | object | Action endpoint. |
method | HTTP method | Request method. |
handler | string | Registry action handler key. |
permission | string | string[] | Permission key or grants. |
visibleWhen | condition | Hides the action when false. |
disabledWhen | condition | Disables the action when true. |
refreshOnSuccess | boolean | Refresh data after success. |
className | string | Styling hook. |