ButtonGroup

ButtonGroup maps item data to generated buttons in an HGroup or VGroup. The current implementation always renders exactly four button slots: shorter arrays are padded with empty items and longer arrays are truncated.

ButtonGroup({
  items: [
    { id: 'play', title: 'Play' },
    { id: 'details', title: 'Details' },
    { id: 'episodes', title: 'Episodes' },
    { id: 'trailer', title: 'Trailer' },
  ],
  textField: 'title',
  layout: Orientation.Horizontal,
  buttonStyleKey: 'controls.Button.primary',
})
  .onItemSelected((event) => {
    this.handleAction(event.item.id);
  });

Key fields are items, textField (default title), layout, buttonStyleKey, and onItemSelected. The event returns the original item in event.item.

Use explicit Button children when the count is not four or individual buttons need different behavior. Use a data/list control for a variable or large item set.