ButtonGroup

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 aria-label="More options" icon={TriangleDownIcon} />
        <ActionMenu.Overlay>
          <ActionList>
            {actions.map((action, index) => {
              return (
                <ActionList.Item
                  key={action}
                  onSelect={() => {
                    setSelectedActionIndex(index)
                  }}
                >
                  {action}
                </ActionList.Item>
              )
            })}
          </ActionList>
        </ActionMenu.Overlay>
      </ActionMenu>
    </ButtonGroup>
  )
}

import React from 'react'
import {ButtonGroup, Button, Stack} from '@primer/react'


export default function Size() {
  return (
    <Stack>
      <ButtonGroup>
        <Button size="medium">One</Button>
        <Button size="medium">Two</Button>
        <Button size="medium">Three</Button>
      </ButtonGroup>


      <ButtonGroup>
        <Button size="small">One</Button>
        <Button size="small">Two</Button>
        <Button size="small">Three</Button>
      </ButtonGroup>
    </Stack>
  )
}