Action System
An intent-based system for handling user interactions, commands, and side effects.
Action Pattern
Separating the intent (what to do) from the trigger (how it is done) allows actions to be reused across buttons, menus, and toolbars.
Quickstart
- Ensure the registry is set up in Installation.
- Run the registry command:
npx shadcn@latest add https://gen-ui-eta-two.vercel.app/r/action-systemCore Pieces
- ActionDef: A plain object that describes the label, intent, and handler.
- ActionButton: Renders an action as a button with loading and confirm support.
- ActionMenu: Renders actions inside a dropdown with grouping and shortcuts.
- ActionBar: A toolbar with overflow management.
- ActionProvider: Optional context for centralizing execution.
Usage
import {
ActionBar,
ActionButton,
ActionMenu,
defineAction,
} from "@/components/systems/action/action-system"
const deleteAction = defineAction({
id: "delete-user",
label: "Delete",
intent: "danger",
shortcut: "meta+backspace",
confirm: {
title: "Delete user?",
description: "This action cannot be undone.",
destructive: true,
},
run: async () => {
await api.users.delete("123")
},
})
const actions = [
deleteAction,
{ id: "edit", label: "Edit", run: () => openEdit() },
]
<ActionBar actions={actions} />
<ActionMenu actions={actions} />
<ActionButton action={deleteAction} />Grouping And Ordering
Use group and order to control menu sections and action priority.
const actions = [
{ id: "edit", label: "Edit", group: "primary", order: 1, run: onEdit },
{ id: "archive", label: "Archive", group: "secondary", order: 2, run: onArchive },
{ id: "delete", label: "Delete", group: "danger", order: 3, intent: "danger", run: onDelete },
]
<ActionMenu actions={actions} />API Reference
| Prop | Type | Notes |
|---|---|---|
| ActionDef.id | string | Unique ID |
| ActionDef.label | string | Display label |
| ActionDef.run | () => Promise<void> | void | Action handler |
| ActionDef.intent | "primary" | "secondary" | "danger" | Visual intent |
| ActionDef.confirm | ActionConfirmation | Confirmation dialog config |
| ActionMenu.actions | ActionDef[] | Menu items |
| ActionBar.actions | ActionDef[] | Toolbar actions |