Button

Button composes a background image, label, and optional icon. It activates from an OK key press or a normalized pointer click.

ButtonRig

Source: hosanna-ui-samples-public/src/hosanna-ui-examples/controls/ButtonRig.ts

@view('ButtonRig')
export class ButtonRigView extends BaseExampleScreenView<ButtonRigState> {
  @state private activationCount = 0;

  protected override getViews(): ViewStruct<ViewState>[] {
    return [
      VGroup([
        Spacer({ height: 100 }),
        HGroup([
          Button({ id: 'playButton' }).height(64).text('Continue').width(200)
            .onClick(() => this.activationCount++),
          Button({ id: 'restart' })
            .height(64)
            .collapsed(true)
            .text('Restart')
            .width(200),
        ]),
        HGroup([
          Button({ id: 'playButton2' }).height(64).text('Continue').width(200),
          Button({ id: 'restart2' })
            .height(64)
            .collapsed(true)
            .text('Restart')
            .width(200),
        ])
          .onFocus((event: FocusEvent) => {
            event.nextFocusId = 'playButton2';
          })
      ]).translation([300, 100])

        .itemSpacing(30),
      Label({
        id: 'buttonActivationStatus',
        text: `Activated: ${this.activationCount}`,
      }).translation([300, 500]),
    ];
  }
}

Button({
  id: 'playButton',
  text: 'Play',
  iconUri: 'pkg:/assets/icons/play.png',
  styleKey: 'controls.Button.primary',
})
  .isInitialFocus()
  .onClick((event) => {
    console.info('Clicked', event.view.id);
  });

Sizing

The defaults are width: 300 and height: 50. Set either dimension to 0 to measure that dimension from the label. Auto width includes 60 pixels of label allowance and, when present, icon width plus an icon gap.

Button({
  text: 'Measured label',
  width: 0,
  height: 0,
})

padding uses { top, right, bottom, left } and insets the icon and label. focusRectPadding uses the same shape and insets the background image. iconLabelGap defaults to 12. horizontalAlignment controls label alignment; when it is omitted, icon buttons align their label left and text-only buttons center it.

State and events

Important fields include:

• text, titleFontKey, and color;
• backgroundUri and backgroundColor;
• iconUri, iconStyleKey, iconColor, and iconSize;
• isActive and isSelected;
• expandOnFocus and collapsed;
• padding, focusRectPadding, and iconLabelGap; and
• onClick.

isSelected selects the resting selected style without replacing the focused style. With expandOnFocus, the button collapses to width 70 while unfocused and restores its measured/configured width on focus.

An inactive button consumes OK/click activation without calling onClick.