Icon Actions

Icon actions are compact commands that render as icon-only buttons.

Use icon actions for dense row actions, table controls, and repeated commands where labels would make the UI too wide.

Schema example

export const userRowActions = {
  resource: "users",
  actions: {
    row: [
      {
        key: "view",
        label: "View",
        tooltip: "View user",
        ariaLabel: "View user",
        icon: "lucide:eye",
        display: "icon",
        handler: "users.view"
      },
      {
        key: "archive",
        label: "Archive",
        tooltip: "Archive user",
        ariaLabel: "Archive user",
        icon: "lucide:archive",
        iconOnly: true,
        handler: "users.archive"
      }
    ]
  },
  registry: {
    actionHandlers: ["users.view", "users.archive"]
  }
} as const;

Display rules

An action becomes icon-only when:

• display: "icon" is set.
• iconOnly: true is set.
• It's a direct table row action (not moved into the overflow menu) — the table renderer forces these to icon display regardless of the action's own display/iconOnly config. Row actions that overflow into the "More actions" dropdown are forced to button (labeled) display instead. See Action Grouping.

Default icons

If no icon is provided, VibeFlui can provide defaults for common actions:

Tooltip and accessible label

Icon-only actions should always have a useful label path:

{
  key: "delete",
  label: "Delete",
  tooltip: "Delete user",
  ariaLabel: "Delete user",
  icon: "lucide:trash-2",
  display: "icon"
}