---
title: Define an action
description: Add product-specific behavior while preserving automatic dependency collection.
order: 20
toc:
  - id: declare-the-action
    title: Declare the action
  - id: custom-control
    title: Custom control
  - id: typed-values
    title: Typed values
---

## Declare the action {#declare-the-action}

Keep the command and its editor dependencies in one definition:

```tsx
const Mention = defineLexicalAction({
  name: "mention",
  label: "Insert mention",
  nodes: [MentionNode],
  plugins: [MentionPopoverPlugin],
  execute: ({ editor }) => openMentionPicker(editor),
})
```

The node and plugin are enabled whenever `<Mention />` appears inside `LexicalActions`.

## Custom control {#custom-control}

```tsx
<Mention>
  {({ disabled, execute }) => (
    <MentionButton disabled={disabled} onSelect={execute} />
  )}
</Mention>
```

Replacing the visible control does not change dependency collection.

## Typed values {#typed-values}

The render context exposes `execute(value?)` with the action's value type. `onClick` is the no-argument shortcut for ordinary buttons.