Skip to main content

Button

Button​

Clickable control with focus, sizing, and events.

Quick Start​

Controls Button

@view('ControlsButton')
export class ControlsButtonView extends BaseExampleScreenView<ControlsButtonState> {
  @state clicks: number = 0;

  protected getViews(): ViewStruct<ViewState>[] {
    // --- edit below ---

    return [
      VGroup([
        Label({ text: `Clicks: ${this.clicks}` }),
        Button({ text: 'Click Me', width: 300 })
          .isInitialFocus(true)
          .onClick(() => { this.clicks++; })
      ]).itemSpacing(12)
    ];

    // --- edit above ---
  }
}
Tip: State and Events

Use view @state fields to drive text, colors, and visibility. Handle interactions via .onClick((event)).

How It Works​

  • Text, icon, and background are composed internally.
  • Width/height auto-measure from text when set to 0.
  • OK key triggers .onClick when active; inactive buttons swallow OK.

Notable State Fields​

  • text: string
  • isActive: boolean
  • isSelected: boolean
  • expandOnFocus: boolean (auto-collapse/expand)
  • iconUri: string
  • color, backgroundColor, iconColor
  • titleFontKey: string
  • width, height (layout)
  • onClick(event)

Event Type​

type ButtonEvent = { view: ButtonView; type: 'click'; preventDefault: boolean };

API Reference​

Button API