> Portal Navigation:
> 
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt

## Resource: Native and Custom Actions

## Article: Native and Custom Actions

## Article Link: https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/actions/native-and-custom-actions.md

## Article Content:

import { Property, PropertyList, ExpandableSection } from "@wix/docs-ui/content";

# Native and Custom Actions
The `actions` and `customActions` properties control the toolbar that appears when a Wix user selects your component in the editor.

## Where to define

You can define `actions` and `customActions` in [`editorElement`](https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/editor-element.md) and in [`elements`](https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/elements.md) of type `inlineElement`.

- **Native actions** are derived from your component's manifest and generated automatically by the editor. For example, `data` items produce a `settings` action, and `cssProperties` produce a `design` action. If you don't define an `actions` object at all, the editor generates these for you. You can override them using the `actions` property.
- **Custom actions** are additional buttons you define using the `customActions` property. They appear as labeled text buttons before the icon-based native actions.

Each action is a key-value pair. The key is the action's identifier, and the value is an object.

## Native actions

Native actions are defined using the `actions` property. All fields are optional since the editor provides defaults. Defining `execution` on a native action overrides its default behavior.

<PropertyList bordered>
  <Property
    name="settings"
    type="Action"
    description="Controls the component's data and content editing experience."
  >
    <ExpandableSection name="Action properties">
      <PropertyList>
        <Property
          name="hidden"
          type="boolean"
          description="Whether the action is hidden from the action bar."
        />
        <Property
          name="displayName"
          type="string"
          description={<>Label shown in the action bar. 4 to 20 characters. Translatable. <strong>Required for custom actions.</strong></>}
        />
        <Property
          name="execution"
          type={<><a href="fallback::https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/actions/execution-types">Execution</a></>}.md
          description={<>Defines what happens when the action is clicked. <strong>Required for custom actions.</strong></>}
        />
      </PropertyList>
    </ExpandableSection>
  </Property>
  <Property
    name="design"
    type="Action"
    description="Controls the component's visual styling experience."
  >
    <ExpandableSection name="Action properties">
      <PropertyList>
        <Property
          name="hidden"
          type="boolean"
          description="Whether the action is hidden from the action bar."
        />
        <Property
          name="displayName"
          type="string"
          description={<>Label shown in the action bar. 4 to 20 characters. Translatable. <strong>Required for custom actions.</strong></>}
        />
        <Property
          name="execution"
          type={<><a href="fallback::https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/actions/execution-types">Execution</a></>}.md
          description={<>Defines what happens when the action is clicked. <strong>Required for custom actions.</strong></>}
        />
      </PropertyList>
    </ExpandableSection>
  </Property>
  <Property
    name="media"
    type="Action"
    description="Controls replacing or uploading media."
  >
    <ExpandableSection name="Action properties">
      <PropertyList>
        <Property
          name="hidden"
          type="boolean"
          description="Whether the action is hidden from the action bar."
        />
        <Property
          name="displayName"
          type="string"
          description={<>Label shown in the action bar. 4 to 20 characters. Translatable. <strong>Required for custom actions.</strong></>}
        />
        <Property
          name="execution"
          type={<><a href="fallback::https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/actions/execution-types">Execution</a></>}.md
          description={<>Defines what happens when the action is clicked. <strong>Required for custom actions.</strong></>}
        />
      </PropertyList>
    </ExpandableSection>
  </Property>
  <Property
    name="manageItems"
    type="Action"
    description="Controls adding, removing, and reordering items in a list."
  >
    <ExpandableSection name="Action properties">
      <PropertyList>
        <Property
          name="hidden"
          type="boolean"
          description="Whether the action is hidden from the action bar."
        />
        <Property
          name="displayName"
          type="string"
          description={<>Label shown in the action bar. 4 to 20 characters. Translatable. <strong>Required for custom actions.</strong></>}
        />
        <Property
          name="execution"
          type={<><a href="fallback::https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/actions/execution-types">Execution</a></>}.md
          description={<>Defines what happens when the action is clicked. <strong>Required for custom actions.</strong></>}
        />
      </PropertyList>
    </ExpandableSection>
  </Property>
  <Property
    name="dashboard"
    type="DashboardAction"
    description="Opens a dashboard page extension."
  >
    <ExpandableSection name="DashboardAction properties">
      Unlike the other native actions, the `dashboard` action opens a dashboard page extension on top of the editor. You define which page to open using the `dashboardPageId` field. If omitted, the default dashboard page opens.

      <PropertyList>
        <Property
          name="dashboardPageId"
          type="string"
          description="The specific dashboard page to open. If omitted, the app's default dashboard page opens. 4 to 50 characters."
        />
        <Property
          name="hidden"
          type="boolean"
          description="Whether the action is hidden from the action bar."
        />
        <Property
          name="displayName"
          type="string"
          description="Label shown in the action bar. 4 to 20 characters. Translatable."
        />
        <Property
          name="execution"
          type={<><a href="fallback::https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/actions/execution-types">Execution</a></>}.md
          description="Defines what happens when the action is clicked."
        />
      </PropertyList>
    </ExpandableSection>
  </Property>
</PropertyList>

<br />

> **Note:** Additional native actions, such as `presets` for components with templates, may also appear depending on your component's capabilities.

## Custom actions

Custom actions are defined using the `customActions` property. Each custom action requires a `displayName` and an `execution`. For the full list of execution types, see [Execution Types](https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/actions/execution-types.md). Custom actions can be defined at the root `editorElement` level or on elements in the `elements` map, allowing child elements to have their own dedicated actions.

### Examples

#### Hide a native action

The following example hides the media action from the action bar:

```json
{
  "editorElement": {
    "actions": {
      "media": {
        "hidden": true
      }
    }
  }
}
```

#### Override display names

The following example overrides the display name of the settings and design actions:

```json
{
  "editorElement": {
    "actions": {
      "settings": {
        "displayName": "Slideshow Settings",
        "execution": {
          "actionType": "data",
          "data": {
            "dataItemKey": "slides"
          }
        }
      },
      "design": {
        "displayName": "Slideshow Design",
        "execution": {
          "actionType": "cssProperty",
          "cssProperty": {
            "cssPropertyKey": "backgroundColor"
          }
        }
      }
    }
  }
}
```

#### Redirect manageItems

The following example redirects `manageItems` to target the `slides` array by providing an `execution` object:

```json
{
  "editorElement": {
    "actions": {
      "manageItems": {
        "displayName": "Manage Slides",
        "execution": {
          "actionType": "data",
          "data": {
            "dataItemKey": "slides"
          }
        }
      }
    }
  }
}
```

For the full list of execution types, see [About Execution Types](https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/actions/execution-types.md).

#### Dashboard action

The following example opens a specific dashboard page when the user clicks the action:

```json
{
  "editorElement": {
    "actions": {
      "dashboard": {
        "hidden": false,
        "displayName": "Analytics Dashboard",
        "dashboardPageId": "b2c3d4e5-f6a7-5b6c-9d8e-0f1a2b3c4d5e",
        "execution": {
          "actionType": "panel",
          "panel": {
            "panelType": "panelId",
            "panelId": "c3d4e5f6-a7b8-6c7d-0e9f-1a2b3c4d5e6f"
          }
        }
      }
    }
  }
}
```

#### Custom action with panel

The following example adds a "Change Colors" button that opens a panel:

```json
{
  "editorElement": {
    "customActions": {
      "vectorArtColors": {
        "displayName": "Change Colors",
        "execution": {
          "actionType": "panel",
          "panel": {
            "panelType": "panelId",
            "panelId": "c0b164d9-cd88-41d3-a45e-51b14c54c3ea"
          }
        }
      }
    }
  }
}
```