Skip to main content

ButtonGroup

ButtonGroup renders a list of Button controls from item data. Use it for compact menus, action groups, settings choices, and screens where each item maps to one button action.

Key Fields​

  • items: identifiable item data used to create buttons.
  • textField: item field used as the button label. Defaults to title.
  • layout: Orientation.Vertical or Orientation.Horizontal.
  • buttonStyleKey: style key passed to each generated button.
  • onItemSelected: called when a generated button is clicked.

Example​

ButtonGroup({
  items: [
    { id: 'play', title: 'Play' },
    { id: 'details', title: 'Details' },
  ],
  buttonStyleKey: 'controls.Button.primary',
}).onItemSelected(event => {
  this.handleAction(event.item.id);
});

Use Button directly when each action needs custom layout or behavior. Use ButtonGroup when the group is data-driven.