ActionCard

A full-width list item that acts as a button or toggle. Used inside dropdowns and command palettes for keyboard-navigable action lists.

Overview

ActionCard renders a single list item with an icon, label, optional description, and an optional keyboard shortcut badge. It operates in two variant modes:

button (default) — renders as a <button>, fires onClick on click and on shortcut.
switch — renders with a Switch on the right side; onClick toggles the switch.

The listen prop activates an internal useHotkey listener — when shortcut keys are held simultaneously, onClick fires. This means ActionCard is both a visual shortcut display AND an active keyboard listener when listen is true.

Import

import { ActionCard } from '@unflow/ui/components/ActionCard';

Props

Prop	Type	Default	Description
`label`	`string`	—	Required. Action label
`icon`	`ReactNode`	—	Leading icon
`description`	`string`	—	Secondary text below the label
`shortcut`	`string[]`	—	Keyboard combo keys (e.g. `['Meta', 'k']`)
`listen`	`boolean`	`false`	Register a global hotkey listener
`allowShortcutRepeat`	`boolean`	`false`	Fire action on keydown repeat
`variant`	`'button' \| 'switch'`	`'button'`	Rendering mode
`checked`	`boolean`	—	Switch checked state (when `variant="switch"`)
`onClick`	`() => void`	—	Click and shortcut handler
`disabled`	`boolean`	`false`	Disables interaction

Default

import { Bell } from '@unflow-ui/icons/communication/bell';

<ActionCard
  icon={<Bell />}
  label="Notifications"
  description="Manage your notification preferences"
  onClick={() => openNotifications()}
/>

With keyboard shortcut

import { MagnifyingGlass } from '@unflow-ui/icons/design/magnifying-glass';

<ActionCard
  icon={<MagnifyingGlass />}
  label="Quick search"
  description="Find anything across your workspace"
  shortcut={['Meta', 'k']}
  listen
  onClick={() => openSearch()}
/>

When listen is true, pressing ⌘K anywhere on the page fires onClick. The Shortcut badge renders the key combination using platform-aware symbols (⌘ on Mac, Ctrl on Windows).

Switch variant

<ActionCard
  icon={<Bell />}
  label="Email notifications"
  description="Receive updates via email"
  variant="switch"
  checked={enabled}
  onClick={() => setEnabled((v) => !v)}
/>

Composing inside ActionsDropdown

ActionCard is designed to be used as items inside ActionsDropdown via the items prop:

import { ActionsDropdown } from '@unflow/ui/components/ActionsDropdown';

const items = [
  {
    icon: <Bell />,
    label: 'Notifications',
    description: 'Manage preferences',
    onClick: openNotifications,
  },
  {
    icon: <MagnifyingGlass />,
    label: 'Search',
    shortcut: ['Meta', 'k'],
    onClick: openSearch,
    groupIndex: 1,
  },
];

<ActionsDropdown open={open} anchorEl={anchor} onClickAway={close} items={items} />

Accessibility

Renders as <button> (button variant) — keyboard focusable, activatable with Enter/Space.
disabled sets aria-disabled="true" and pointer-events-none.
The shortcut keys are rendered using <Shortcut> which is visually styled but not announced redundantly (keyboard shortcuts are supplementary UI).

On this page