Code

Props - Single Selection

Props	Data Type	Required
className	string	❌
children	-HTML tags -Custom Components (MenuOption, MenuHeader and MenuDivider)	❌
menuType	'Menu' | 'MenuBox'	❌
btnText	string	❌
btnType	'Base' | 'Primary' | 'Secondary' | 'Ghost' | 'Danger' | 'DangerAlt'	❌
btnSize	'Default' | 'Large' | 'Small'	❌
btnIcon	Telicon Icons	❌
btnIconPosition	'Left' | 'Right'	❌
carets	boolean	❌
disabled	boolean	❌
search	boolean (Only Available with menuType 'Menu')	❌
autoposition	boolean	❌

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

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

• Menu

• MenuBox

Live Demo

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

React

Storybook