Skip to content
Stand with Ukraine flag

Action button

  • Widget
  • v1.0.0
  • Sep 1, 2026
  • MIT license
  • v4.2+ | Built-in
Action button

Facilitates single-click navigation to other dashboards, states, or custom actions. Configurable settings allow for on-click action definition and conditions for button activation or deactivation. It offers various layouts and custom styling options for different states.

Widget Type
  • Latest
Category
  • Controls

Who it’s for

Dashboard builders who need a button that moves the reader rather than the equipment — into a drill-down state, across to another dashboard, out to an external system, or into a native mobile feature. Nothing is sent to a device; the button is navigation and interface.

What it does

The Action button performs a configured dashboard action when clicked, and can highlight or disable itself from live data. Its on-click action can switch dashboard state, update the current state, open a different dashboard, run a custom action, trigger a mobile feature such as the camera or a QR scan, or open a URL.

  • Navigation that knows where it is — an activated condition can highlight the button from the current dashboard state, so a row of them works as a menu that shows which page you are on.
  • A disabled condition greys the button out from an attribute, a telemetry key, an RPC result or an alarm status, which is how an unsafe drill-down is blocked while a condition holds.
  • Mobile actions reach native features — camera, QR scanner, location — on dashboards opened in the mobile app.
  • Labels accept entity variables such as ${entityName}, so a button duplicated across assets names itself.
  • Enabled, hovered, pressed, activated and disabled each carry their own styling, so the button’s state is visible rather than inferred.
  • Several layouts, from outlined and filled to underlined and basic, so the button matches the dashboard rather than standing out from it.
  • The Action button sends no device command: a button that has to operate equipment belongs on the Command button.

How to set up

Data keys

The Action button takes no data keys — the activated and disabled conditions come from configured actions rather than from the datasource key list.

AttributeScopeOperationDescription
Configured keyAnyReadWith Activated state or Disabled state set to Get attribute, this key decides whether the button is highlighted or greyed out. Get dashboard state id drives activation from navigation instead.

Behavior

SettingDefaultEffect
On clickUnsetThe dashboard action performed — state navigation, another dashboard, a custom action, a mobile action or a URL
Activated stateUnsetThe condition under which the button appears highlighted
Disabled stateUnsetThe condition under which the button cannot be clicked

For a navigation menu, set Activated state to Get dashboard state id and match it against the state the button opens. The button then highlights whenever that page is showing, including when the user arrived by a link rather than by pressing it.

How to customize

  • To choose what the click does — set the On click action to a dashboard state, another dashboard, a custom action, a mobile action or a URL.
  • To show which page is current — set Activated state to Get dashboard state id, and style the activated state distinctly.
  • To block a drill-down under a condition — configure the Disabled state action against an attribute, a key, an RPC result or an alarm status.
  • To name the button from its entity — put ${entityName} or another variable in the label.
  • To match the dashboard’s styling — set the Layout to outlined, filled, underlined or basic, and adjust the icon and its size.
  • To make each interaction visible — set the main and background colors separately for enabled, hovered, pressed, activated and disabled.

Tips

  • Drive activation from the dashboard state rather than from clicks. A menu that tracks only its own presses shows the wrong item highlighted the moment someone follows a link or presses back, which is more confusing than no highlight at all.
  • Style the disabled state so it does not read as merely unimportant. A greyed button that looks like a low-priority option gets clicked repeatedly and reported as broken, whereas one that clearly reads as unavailable does not.

Share Your Widget with the Community

Built a custom widget? Export it as a JSON from ThingsBoard and publish it to the IoT Hub through a simple 4-step wizard (Upload, Listing, Readme, Review & Submit). Share it with thousands of ThingsBoard developers worldwide and get featured in the catalog.