Actions Examples

This article provides practical examples of using native actions, custom actions, and display filters in your component manifests.

Renaming native actions

A simple override that changes the labels without changing the behavior:

Hide a native action and replace it with a custom action

If your component has image data but you manage media through a custom panel instead:

Custom panel action

The SvgImage component adds a "Change Colors" button that opens a dedicated color-editing panel:

Event action

The TemplateContainer component adds a "Settings" custom action that dispatches an event to the editor script:

Forward action

The Button component surfaces its child AnimatedIcon's customization panel. The AnimatedIcon is a ref element with selectable: false, so users can't select it directly. The forward action lets the parent Button expose the icon's editing UI.

When using actionName: "custom", the target element must have a matching customActions entry in its own manifest. In this case, the AnimatedIcon component defines customActions.animatedIcon which the forward action invokes.

Native action overrides with custom actions

The Slideshow component overrides manageItems to manage slides, and adds a custom forward action for the navigation icon:

CSS property and display group actions

Quick-access buttons for specific styling controls:

Display filters

The following example uses hide to remove specific actions and data items from the editor:

The following example uses show to allow only the settings and design actions to be visible: