DropdownButton

DropdownButton combines a trigger button (either an icon button or a full button) with a popover menu listing DropdownOption items. Each option can execute a local callback or trigger a remote HTTP request (including file exports). Use it as a flexible replacement for ActionsMenuButton when you need remote action support or a labelled trigger button.

Props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | options | DropdownOption[] | Yes | — | Array of dropdown items. See DropdownOption definition below. | | buttonVariant | "icon" \| "button" | No | "icon" | Whether the trigger renders as an icon button or a labelled button. | | buttonSize | "xs" \| "sm" \| "md" \| "lg" \| "xl" | No | "md" | Size of the trigger button. | | buttonType | "clear" \| "outline" \| "solid" | No | "clear" | Visual variant of the trigger button. | | buttonIcon | string | No | "moreVertical" | Icon identifier for the trigger button. | | buttonTitle | string | No | "" | Label for the trigger button when buttonVariant is "button". | | buttonStyle | React.CSSProperties | No | — | Inline styles applied to the trigger button. | | buttonClassName | string | No | — | CSS class applied to the trigger button (only when buttonVariant is "button"). | | popoverStyle | React.CSSProperties | No | — | Inline styles applied to the popover container. | | popoverZIndex | number | No | 9999 | Z-index of the popover. | | onItemSelect | (actionName: string) => void | No | — | Global handler called with the item's name when selected (used when item has no own handler). | | closeOnSelect | boolean | No | true | Whether the popover closes after an item is selected. |

DropdownOption

| Field | Type | Required | Description | |-------|------|----------|-------------| | name | string | Yes | Unique key identifying the option. | | label | string | Yes | Text displayed in the dropdown. | | config.icon | string | No | Icon identifier shown before the label. | | config.color | string | No | Color of the option button. | | config.style | React.CSSProperties | No | Inline styles for the option button. | | config.onClick | (actionName: string) => void | No | Per-item click handler. Takes priority over onItemSelect. | | config.mode | "local" \| "remote" | No | When "remote", the item uses ActionButton to make an HTTP request. | | config.path | string | No | API endpoint path (requires mode: "remote"). | | config.method | "GET" \| "POST" \| "PUT" \| "DELETE" | No | HTTP method (requires mode: "remote"). | | config.useAuthToken | boolean | No | Use authenticated HTTP client (requires mode: "remote"). | | config.apiBaseUrl | string | No | Base URL override (requires mode: "remote"). | | config.data | Record<string, any> | No | Request body (requires mode: "remote"). | | config.onSuccess | (response: any) => void | No | Callback on request success (requires mode: "remote"). | | config.onError | (error: any) => void | No | Callback on request failure (requires mode: "remote"). | | config.isExport | boolean | No | Use getBlob() instead of standard request for file downloads. | | config.closeOnSelect | boolean | No | Per-item override for closeOnSelect. |

Usage

Basic icon trigger

import DropdownButton from '@/components/buttons/DropdownButton';

export default function Example() {
  return (
    <DropdownButton
      options={[
        { name: 'edit', label: 'Edit', config: { icon: 'edit' } },
        { name: 'delete', label: 'Delete', config: { icon: 'trash', color: 'danger' } },
      ]}
      onItemSelect={(name) => console.log('Selected:', name)}
    />
  );
}

Labelled trigger button

import DropdownButton from '@/components/buttons/DropdownButton';

export default function Example() {
  return (
    <DropdownButton
      buttonVariant="button"
      buttonTitle="Actions"
      buttonIcon="chevronDown"
      buttonType="outline"
      options={[
        { name: 'export', label: 'Export CSV' },
        { name: 'archive', label: 'Archive' },
      ]}
      onItemSelect={(name) => console.log(name)}
    />
  );
}

Remote action with file export

import DropdownButton from '@/components/buttons/DropdownButton';

export default function Example({ orderId }: { orderId: string }) {
  return (
    <DropdownButton
      options={[
        {
          name: 'pdf',
          label: 'Download PDF',
          config: {
            mode: 'remote',
            method: 'GET',
            path: `/v1/orders/${orderId}/pdf`,
            useAuthToken: true,
            isExport: true,
            onSuccess: (blob) => {
              const url = URL.createObjectURL(blob);
              window.open(url);
            },
          },
        },
      ]}
    />
  );
}