Icon Button

This text is AI-generated

This documentation was written with the help of AI and has not been fully reviewed. If something is wrong, unclear or missing, please let us know. Use the feedback form, and say which section it concerns.

The Icon Button is a compact push button that shows an icon instead of a text. It is found in the Input - OpenBridge section of the Perspective Component Palette as Icon Button.

The Icon Button is one of the input components. Events, disabling, icons and the behavior in the Designer are shared by all of them and are described in Input Components — Common Features. This page covers what is specific to the Icon Button.

An Icon Button with default properties:

A new Icon Button has the placeholder icon. Choose the icon first.

Action

The Icon Button has no value. When the operator clicks it, it fires the onActionPerformed event once. Configure the event with the action to perform (see Example 1).

Clicking does not change activated; see Activated.

A disabled Icon Button does not fire the event.

---

Icon and Label

icon is an icon picker: choose the icon in the property editor, which sets icon.path, for example openbridge/search. See Icons.

Set hasLabel to true to show a text under the icon, and type the text in label:

With a label	With a label, activated

With a label the button is 56 px tall instead of 48, and the label can be wider than the button. Make the component’s box large enough for both.

Properties

Name	Description	Property Type
icon	The icon on the button. An icon picker; see icon.path.	object
icon.path	Path of the icon. Default openbridge/placeholder.	value
hasLabel	Show a label under the icon. Default false.	value
label	Text of the label. Empty by default. Only shown when hasLabel is true.	value

---

Variant

variant selects how prominent the button is:

variant		Enabled	Activated	Disabled
normal (default)	The standard button.
raised	A filled button.
flat	No border or background.
integration	For use on an integration bar.

The integration variant is drawn in the colours of the integration bar. On an ordinary background, as in the images, it is hard to see. The raised variant is also faint when activated is true; use normal or flat for a button that shows an activated state.

Properties

Name	Description	Property Type
variant	normal, raised, flat or integration. Default normal.	value

---

Activated

Set activated to true to draw the button as selected or switched on. activeColor draws the icon in a stronger colour, in both states:

	activeColor = false	activeColor = true
activated = false
activated = true

The component never changes activated itself: a click only fires the event. Bind activated to the state the button represents, or use an Icon Check Button, which toggles on its own.

Properties

Name	Description	Property Type
activated	Draw the button as selected. Default false.	value
activeColor	Draw the icon in a stronger colour. Default false.	value

---

Width and Corners

The visible button is 32 px wide inside a 48 px touch area. It is drawn at the left edge of the component’s box and does not stretch with it, so size the box to the button. The blue frame in the images is the component’s box, made wider than the button to show this.

Property		Image
none	The standard button.
wide = true	The visible button fills the whole 48 px.
cornerLeft = true	The right side is square and reaches the right edge of the 48 px area.
cornerRight = true	The left side is square and reaches the left edge of the 48 px area.

A cornerLeft button placed directly to the left of a cornerRight button therefore forms one joined pair.

Properties

Name	Description	Property Type
wide	Make the visible button 48 px wide instead of 32. Default false.	value
cornerLeft	Square right side, flush with the right edge. Default false.	value
cornerRight	Square left side, flush with the left edge. Default false.	value

---

Common Properties

These work in the same way on every input component, and are described in Input Components — Common Features:

• Disabled — disabled.
• Appearance — style.

Component Events

Event	Description	Event Object
onActionPerformed	Fired when the operator clicks the button.	—

See Events.

Examples

Example 1 — Refresh Command

1. Drop an Icon Button into the view and choose the icon openbridge/refresh-google for icon.

2. Configure the onActionPerformed event with a script action:

   def runAction(self, event):
     system.tag.writeBlocking(['[default]Pump01/Refresh'], [True])

Example 2 — Deck Light Button That Shows Its State

1. Drop an Icon Button into the view and choose the icon openbridge/lights.

2. Set hasLabel to true and label to Deck, and set the height of the component to 56.

3. Bind activated to the tag [default]Lights/Deck/On.

4. Configure the onActionPerformed event with a script action that toggles the tag:

   def runAction(self, event):
     path = '[default]Lights/Deck/On'
     on = system.tag.readBlocking([path])[0].value
     system.tag.writeBlocking([path], [not on])