hx components Actions

HxActions

Dropdown action menu — combines a trigger button with a popup containing action items.

<HxActions
  $model={form}
  leading={<HxButton text="Actions" />}
  tailing={
    <HxFlex direction="dir-y">
      <HxButton text="Edit" variant="ghost" onClick={edit} />
      <HxButton text="Duplicate" variant="ghost" onClick={dup} />
      <HxSeparator />
      <HxButton text="Delete" variant="ghost" color="danger" onClick={del} />
    </HxFlex>
  }
  color="primary"
  variant="outline"
/>

Props

Prop	Type	Default	Description
$model	HxObject<T>	—	Optional reactive model
color	HxColor	'primary'	Trigger button colour
variant	HxButtonVariant	'solid'	Trigger button variant
leading	HxActionsLeading	—	Trigger content (click to toggle popup); defaults to a "More" (ellipsis) button when omitted
tailing	HxActionsTailing	required	Popup dropdown content
zIndex	number	config default	Popup z-index
gapToEdge	number	config default	Trigger-to-popup gap (px)

Plus the HxFlex container props (padding / margin / border, alignItems, alignContent, justifyContent, gapY and the flex / grid cell props; direction and wrap are fixed to dir-x / no-wrap on the trigger).

Sub-Components

• HxActionsLeadingContent — Popup show/hide state, click-outside detection, keyboard event handling
• HxActionsTailingContent — Popup rendering with hover management via data-hx-hover

Keyboard Navigation

• Escape — Close popup
• Enter / Space — With the popup open, select the currently hovered item
• Arrow Up / Down — With the popup closed, open it; with it open, move the hover to the previous / next item

Native DOM Events

All events on the trigger button and popup content are forwarded. In practice, interaction is via leading/tailing content's own events (onClick on menu items), with keyboard navigation handled internally.

Global Config

import { configHxActions } from '@hx/components';
configHxActions({ color: 'primary', variant: 'solid' });