How to add a click handler to Fluent UI v9's SplitButton?

Question

The documentation of Fluent UI v9's SplitButton is not clear on how to add a click handler to the primary button.

Can anyone show me an example of how that is done?

I have tried finding examples on their GitHub page and I've googled for possible examples and I found one GitHub issue noting that this is a problem with their documentation.

score 1 · Answer 1 · answered Dec 22 '22 at 17:30

Figured it out:

<Menu positioning="below-end">
  <MenuTrigger disableButtonEnhancement>
    {(triggerProps: MenuButtonProps) => (
      <SplitButton
        primaryActionButton={{ onClick: handleClick }}
        menuButton={triggerProps}
      >
        Example
      </SplitButton>
    )}
  </MenuTrigger>

  <MenuPopover>
    <MenuList>
      <MenuItem>
        Remove file
      </MenuItem>
    </MenuList>
  </MenuPopover>
</Menu>

How to add a click handler to Fluent UI v9's SplitButton?

1 Answers1