@spark-web/action-dropdown

A pill-shaped button component that displays a dropdown menu of actions when clicked.

Usage

import { ActionDropdown } from '@spark-web/action-dropdown';
import type { ActionItem } from '@spark-web/action-dropdown';

const actions: ActionItem<{ id: number }>[] = [
  {
    label: 'Edit',
    value: 'edit',
    onClick: data => console.log('Edit clicked', data),
    data: { id: 1 },
  },
  {
    label: 'Delete',
    value: 'delete',
    onClick: data => console.log('Delete clicked', data),
    data: { id: 1 },
    tone: 'critical',
  },
];

const MyComponent = () => <ActionDropdown label="Actions" actions={actions} />;

ActionItem

Each action is typed as ActionItem<T>:

| Prop | Type | Required | Description | | ---------- | -------------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------ | | label | string | Yes | Display text for the action | | value | string | Yes | Unique identifier for the action | | onClick | (item: T \| undefined) => void | Yes | Callback invoked when the action is selected | | data | T | No | Arbitrary data passed to onClick | | disabled | boolean | No | Disables the action | | tone | ForegroundTone | No | Affects the label color — use 'critical' for destructive actions. ForegroundTone is exported from @spark-web/text. |