> For the complete documentation index, see [llms.txt](https://2600hz.gitbook.io/sds/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://2600hz.gitbook.io/sds/sds-components/simple-components/button-menu/code.md).

# Code

## Props - Single Selection

<table><thead><tr><th width="212">Props</th><th width="385.66666666666663">Data Type</th><th>Required</th></tr></thead><tbody><tr><td>className</td><td>string</td><td><span data-gb-custom-inline data-tag="emoji" data-code="274c">❌</span></td></tr><tr><td>children</td><td>-HTML tags<br>-Custom Components<br><em>(MenuOption, MenuHeader and MenuDivider)</em></td><td><span data-gb-custom-inline data-tag="emoji" data-code="274c">❌</span></td></tr><tr><td>menuType</td><td>'Menu' | 'MenuBox'</td><td><span data-gb-custom-inline data-tag="emoji" data-code="274c">❌</span></td></tr><tr><td>btnText</td><td>string</td><td><span data-gb-custom-inline data-tag="emoji" data-code="274c">❌</span></td></tr><tr><td>btnType</td><td>'Base' | 'Primary' | 'Secondary' | 'Ghost' | 'Danger' | 'DangerAlt'</td><td><span data-gb-custom-inline data-tag="emoji" data-code="274c">❌</span></td></tr><tr><td>btnSize</td><td>'Default' | 'Large' | 'Small'</td><td><span data-gb-custom-inline data-tag="emoji" data-code="274c">❌</span></td></tr><tr><td>btnIcon</td><td>Telicon Icons</td><td><span data-gb-custom-inline data-tag="emoji" data-code="274c">❌</span></td></tr><tr><td>btnIconPosition</td><td>'Left' | 'Right'</td><td><span data-gb-custom-inline data-tag="emoji" data-code="274c">❌</span></td></tr><tr><td>carets</td><td>boolean</td><td><span data-gb-custom-inline data-tag="emoji" data-code="274c">❌</span></td></tr><tr><td>disabled</td><td>boolean</td><td><span data-gb-custom-inline data-tag="emoji" data-code="274c">❌</span></td></tr><tr><td>search</td><td>boolean<br>(Only Available with menuType 'Menu')</td><td><span data-gb-custom-inline data-tag="emoji" data-code="274c">❌</span></td></tr><tr><td>autoposition</td><td>boolean</td><td><span data-gb-custom-inline data-tag="emoji" data-code="274c">❌</span></td></tr></tbody></table>

### Description

This component is the mix between the `Button` and the `Menu/MenuBox` components. The reason why it was created as a different component is because this combinations is a very common implementation on Comm.land layouts that requires a considerable extra job for developers to make it work as it is supposed to. Besides that, by doing this a SDS component, it is easier to add the extra features like `autoposition` one, saving a lot of extra work to developers in the case they wanted to implement it manually on the component.

### menuType

The `ButtonMenu` component offers the two available menu types in SDS Components. The Menu component has been done to work in coordination with other components like: `MenuOption` `MenuHeader` and `MenuDivider`. Besides that, the Menu option has the Search filter already incorporated.

`MenuBox`, on the other hand, offers an empty box as a `Menu` component that can accept custom components or HTML elements without any kind of limitations, in contrast with the standard `Menu` component. This might be very useful when developers are creating custom menus that don't follow the standard template.

### autoposition

This feature allows developers to not worry about the correct location of the `Menu` or `MenuBox` component on the screen, because this will relocate it automatically, placing it on the top, bottom, right or left; it all depends on the available space.

### carets

This prop will add a carets-sortable icon on the right side of the Button component. The usage of the caret prop might be very useful as a visual indicator that this is not a standard `Button`, instead, it is a `Button` that works as a trigger to show a `Menu/MenuBox` component, almost like a dropdown.

### Example

```tsx
const clickEvent = (menuOptionData)=>{
  console.log(menuOptionData);
}

return (
    <ButtonMenu
      btnIcon="setting-cog"
      btnIconPosition="Left"
      btnSize="Default"
      btnText="Button Menu"
      carets
      className="ButtonMenuExample"
      menuType="Menu"
    >
      <MenuOption value="Element 1" onClick={clickEvent}>
        Element 1
      </MenuOption>
      <MenuOption value="Element 2" onClick={clickEvent}>
        Element 2
      </MenuOption>
      <MenuOption value="Element 3" onClick={clickEvent}>
        Element 3
      </MenuOption>
    </ButtonMenu>
)
```

## Components Dependency

* [Button](/sds/sds-components/simple-components/button.md)
* [Menu](/sds/sds-components/simple-components/menu.md)
* [MenuBox](/sds/sds-components/simple-components/menu-box.md)

## Live Demo <a href="#live-demo" id="live-demo"></a>

For detailed code usage documentation, see the Storybooks for each framework below.​

### React

{% embed url="<https://sipster-react-component-storybook.netlify.app/?path=/story/general-components-button-menu--base-button-menu>" %}