List Buttons

Scope

List button customizations are model-scoped and split into two UI patterns:

Header or list-wide actions
Row-level actions

Both should live under the owning module's admin-layout folder.

File Location

For model-scoped list actions, use:

solid-ui/src/<module-name>/admin-layout/<model-name>/extension-components/

You may organize files by naming convention inside that folder, but the module system does not require separate list-buttons/ and row-buttons/ folders.

List Header Buttons

Use header buttons for list-wide actions such as export, bulk processing, sync, or filtered operations.

Header Button Props

Action context can include:

action
params
selectedRecords
filters

Guidance:

For selection-based operations, guard empty selectedRecords.
Prefer selectedRecords and filters over hardcoded assumptions.

Row Buttons

Use row buttons for record-specific actions triggered from a clicked row.

Row Button Props

Action context can include:

action
params
rowData

Guidance:

Use rowData as the source of truth for record-level actions.
Guard missing rowData or ID and show clear user feedback.
For directly visible inline actions, set actionInContextMenu: false in layout metadata.

Registration

import { ExtensionComponentTypes, type SolidUiModule } from "@solidxai/core-ui";
import { GenerateReportButton } from "./admin-layout/payment/extension-components/GenerateReportButton";
import { RefundPaymentButton } from "./admin-layout/payment/extension-components/RefundPaymentButton";

const paymentUiModule = {
  name: "payment",
  extensionComponents: [
    {
      name: "GenerateReportButton",
      component: GenerateReportButton,
      type: ExtensionComponentTypes.listHeaderAction,
    },
    {
      name: "RefundPaymentButton",
      component: RefundPaymentButton,
      type: ExtensionComponentTypes.listRowAction,
    },
  ],
} satisfies SolidUiModule;

export default paymentUiModule;

Keep action names aligned with metadata.

Metadata Wiring

Header buttons are typically configured in list layout metadata at:

layout.attrs.headerButtons[]

Row buttons are typically configured at:

layout.attrs.rowButtons[]

Example:

{
  "layout": {
    "type": "list",
    "attrs": {
      "headerButtons": [
        {
          "attrs": {
            "label": "Generate Report",
            "action": "GenerateReportButton",
            "actionInContextMenu": false,
            "openInPopup": true,
            "icon": "si-file-excel"
          }
        }
      ],
      "rowButtons": [
        {
          "attrs": {
            "label": "Refund",
            "action": "RefundPaymentButton",
            "openInPopup": true,
            "actionInContextMenu": true
          }
        }
      ]
    }
  }
}

API Guidance

If list or row button actions require backend calls, SolidX supports two valid integration styles.

Option A: Solid HTTP Helpers

Use solidGet, solidPost, solidPut, solidPatch, solidDelete, or solidAxios when the action is localized and does not need shared cached API state.

Rules:

Use /resource paths rather than hardcoded /api/resource.
Handle loading, success, and error explicitly.
Apply explicit refresh behavior after mutation as needed.
Follow project conventions for popup close and toast error handling.

Option B: Redux / RTK Query

If the list action belongs to a module-owned API strategy, place RTK Query APIs, reducers, and middleware under:

solid-ui/src/<module-name>/redux/

and register them through the same module manifest.

Use this when actions participate in shared cached state, invalidation, or coordinated refresh flows.

UI Guidance

For row-level buttons, default to compact inline actions:

use SolidButton
prefer size="sm"
use variant="ghost" or variant="outline" for secondary actions
keep width content-based and labels short

If action metadata uses openInPopup: true, SolidX already mounts your component inside a popup shell.

Render popup content only.
Always provide an explicit close path on cancel and after completion.
Use closePopup from @solidxai/core-ui for dismissal.

Pattern:

import { closePopup } from "@solidxai/core-ui";
import { useDispatch } from "react-redux";

const dispatch = useDispatch();
const onClose = () => dispatch(closePopup());