Two-segment button

Who it’s for

Dashboard builders who need a two-way choice presented as one control — a pair of dashboard states, two views of the same data, two modes — where a tab bar would be too heavy and two separate buttons would not show which is currently active.

What it does

The Two-segment button presents two joined buttons of which one is always selected, each with its own label, icon and colors. A configured action decides which segment is selected, and each segment fires its own action when pressed, so the pair works as navigation, as a view switch or as a mode control.

• One control, two exclusive options, with the current one visibly selected — which two independent buttons cannot show.
• The selected segment is decided by an action, so selection can follow the dashboard state, an attribute or a telemetry value rather than only the last press.
• Each segment carries its own label and icon, so the choice can be read by shape as well as by text.
• Selected and unselected styles are configured independently, including custom styles beyond the color palette.
• A disabled condition greys the whole control out.
• Auto scale keeps the labels proportional as the tile is resized.
• The Two-segment button is a two-option control: three or more choices need a different widget, and it commands nothing by itself beyond the actions configured on each segment.

How to set up

Data keys

The Two-segment button takes no data keys — selection and actions come from its configured actions.

Attribute	Scope	Operation	Description
Configured key	Any	Read	With Select button set to Get attribute, this key decides which segment is shown as selected. Get dashboard state id selects from the current dashboard state instead.

Method	Direction	Parameters	Sent when
Segment method	One-way or two-way, as configured	Constant or from a convert function	When that segment is pressed, if its action is an RPC call

Behavior

Setting	Default	Effect
Select button	Unset	The action deciding which segment is selected — including Get dashboard state id
First button click	Unset	The action performed when the first segment is pressed
Second button click	Unset	The action performed when the second segment is pressed
Disabled state	Unset	An action deciding when the control is greyed out

For a view switch, set Select button to Get dashboard state id and give each segment a state-navigation action. The control then follows the dashboard even when the state is changed from somewhere else, which a selection tracked only by presses cannot do.

How to customize

• To make selection follow the dashboard — set Select button to Get dashboard state id, so the control stays correct when navigation happens elsewhere.
• To make selection follow the device — set Select button to Get attribute or Get time series and supply a parse function.
• To define what each segment does — set First button click and Second button click to their own actions.
• To label the choice — set each segment’s Label and Icon under its own button appearance.
• To make the selected segment obvious — set the Selected and Unselected color palettes separately, and use custom styles where the palette is not enough.
• To keep text proportional — leave Auto scale on, or turn it off to pin an exact size.
• To fit the card — set the Layout and the Card border.

Tips

• Drive selection from the dashboard state rather than from the presses whenever the segments navigate. A control that tracks only its own clicks shows the wrong segment as soon as a user arrives by a link or presses the browser’s back button.
• Make the unselected segment clearly recessive rather than merely a different color. Two segments of equal visual weight read as two buttons, and the whole advantage of joining them is that the reader can see which one is active without thinking about it.