How to make a dropdown ButtonGroup?

[CleverLemming1337]

The website says it's possible to split a button group with a dropdown but it doesn't say how to do in React.

[mperrotti]

@CleverLemming1337 - here's a way you can use ButtonGroup as a split button with a dropdown:

StackBlitz:
Rendered code:

import React from 'react';
import { ButtonGroup, Button, ActionMenu, ActionList } from '@primer/react';
import { TriangleDownIcon } from '@primer/octicons-react';

const actions = ['Action one', 'Action two', 'Action three'];

export default function DropdownSplit() {
  const [selectedActionIndex, setSelectedActionIndex] =
    React.useState<number>(0);
  const selectedAction = actions[selectedActionIndex];

  return (
    <ButtonGroup>
      <Button
        onClick={() => {
          alert(`Activated ${selectedAction}`);
        }}
      >
        {selectedAction}
      </Button>
      <ActionMenu>
        <ActionMenu.Button icon={TriangleDownIcon}>
          More options
        </ActionMenu.Button>
        <ActionMenu.Overlay>
          <ActionList>
            {actions.map((action, index) => {
              return (
                <ActionList.Item
                  key={action}
                  onSelect={() => {
                    setSelectedActionIndex(index);
                  }}
                >
                  {action}
                </ActionList.Item>
              );
            })}
          </ActionList>
        </ActionMenu.Overlay>
      </ActionMenu>
    </ButtonGroup>
  );
}

[CleverLemming1337]

Oh, this works. Thank you!