MenuButton

const { Item } = MenuButton;
const menu = ['Undo', 'Redo', 'Cut', 'Copy', 'Paste'].map(item => <Item key={item}>{item}</Item>);
ReactDOM.render(
  <div>
    <Box direction="row" spacing={20}>
      <MenuButton label="Document Edit">{menu}</MenuButton>
      <MenuButton type="primary" label="Document Edit">
        {menu}
      </MenuButton>
      <MenuButton type="secondary" label="Document Edit">
        {menu}
      </MenuButton>
    </Box>
    <br />
    <Box direction="row" spacing={20}>
      <MenuButton text label="Document Edit">
        {menu}
      </MenuButton>
      <MenuButton text type="primary" label="Document Edit">
        {menu}
      </MenuButton>
      <MenuButton text type="secondary" label="Document Edit">
        {menu}
      </MenuButton>
    </Box>
  </div>,
  mountNode
);

const { Item } = MenuButton;
const menu = ['Undo', 'Redo', 'Cut', 'Copy', 'Paste'].map(item => <Item key={item}>{item}</Item>);
ReactDOM.render(
  <Box direction="row" spacing={20}>
    <MenuButton label="Edit Document" size="small" type="secondary">
      {menu}
    </MenuButton>
    <MenuButton label="Edit Document" size="medium" type="secondary">
      {menu}
    </MenuButton>
    <MenuButton label="Edit Document" size="large" type="secondary">
      {menu}
    </MenuButton>
  </Box>,
  mountNode
);

const { Item, Group, Divider } = MenuButton;
const selectItem = id => {
  console.log(id);
};
ReactDOM.render(
  <MenuButton type="primary" label="Document Edit" onItemClick={selectItem}>
    <Item key="undo">Undo</Item>
    <Item key="redo">Redo</Item>
    <Divider />
    <Group>
      <Item key="cut">Cut</Item>
      <Item key="copy">Copy</Item>
      <Item key="paste">Paste</Item>
    </Group>
  </MenuButton>,
  mountNode
);

const { Item } = MenuButton;
const menu = ['Undo', 'Redo', 'Cut', 'Copy', 'Paste'].map(item => <Item key={item}>{item}</Item>);
ReactDOM.render(
  <div>
    <MenuButton
      label="Single"
      selectMode="single"
      onSelect={keys => console.log(keys)}
      type="secondary"
      style={{ marginRight: 20 }}
    >
      {menu}
    </MenuButton>
    <MenuButton
      label="Multiple"
      selectMode="multiple"
      onSelect={keys => console.log(keys)}
      type="secondary"
    >
      {menu}
    </MenuButton>
  </div>,
  mountNode
);