How to Change the Appearance of a <MenuButton> in azure-devops-ui/Menu

I'm developing an extension an creating a complete new board for a User Story Mapping. In the card I want to add a menu just like the original board. Here is the example of what to I have so far: User Story Mapping board

I would like to use the <MenuButton> component to create a "more options" button, similar to the one used in the current boards. I need to customize the appearance of the button in the following ways:

Make the button smaller
Change the color on onEnter and onLeave events
Remove the chevron icon

The result would be: Result expected

I dont want to add an option in the menu but actually create a complete new board.

I would like to know if it is possible to use the Azure Devops UI library or I need to use something else?

Here is a basic example of how I'm using the <MenuButton>:

import { IMenuItem, MenuButton } from "azure-devops-ui/Menu";


<div style={{ width: "25px", height: "25px", position: "absolute", top: "3px", right: "3px", justifyContent: "center" }}>
          <MenuButton
            subtle={true}
            iconProps={{ iconName: "More" }}
            className="full-size"
            contextualMenuProps={{
              menuProps: {
                items: menuItems,
                onActivate: handleMenuActivate,
                id: "cardSelectionMenu",
              },
            }}
          />
        </div>

But I go this

bad ux

Im using

dependencies": {
    "azure-devops-extension-api": "~1.157.0",
    "azure-devops-extension-sdk": "~2.0.11",
    "azure-devops-ui": "~2.164.0",
}

Solution

Hi I have solve the issue, tks for your help.

It is posible to edit the style with the style prop directly.
and also with hideDropdownIcon=false you hide the chevron.
With size: IconSize.inherit let you change the size of the button

Here its my component

const ButtonCardMenu: React.FC<IProps> = () => {


    const handleActionClick = (action: string) => {
        consoleLogDev(`Action clicked: ${action}`);
    };

    const menuItems: IMenuItem[] = [
        {
            id: "linkdependency",
            text: "Link Dependency",
            onActivate: () => handleActionClick('linkdependency')
        }
    ];


    return (<div style={{ width: "25px", height: "25px", position: "absolute", top: "0px", right: "0px" }}>
        <MenuButton
            hideDropdownIcon={true}
            subtle={true}
            ariaHidden={true}
            iconProps={{ iconName: "More", size: IconSize.inherit }}
            style={{
                backgroundColor: 'rgb(224, 230, 236)',
                border: 'none',
                borderRadius: '1px',
                width: "25px",
                height: "24px"
            }}
            contextualMenuProps={{
                menuProps: {
                    items: menuItems,
                    onActivate: handleMenuActivate,
                    id: "SelectionMenu",
                },
            }}
        />
    </div>)
};

export default ButtonCardMenu;