--- order: 5 title: zh-CN: 带下拉框的按钮 en-US: Button with dropdown menu --- ## zh-CN 左边是按钮,右边是额外的相关功能菜单。可设置 `icon` 属性来修改右边的图标。 ## en-US A button is on the left, and a related functional menu is on the right. You can set the icon property to modify the icon of right. ```jsx import { Menu, Dropdown, Button, message, Space, Tooltip } from 'antd'; import { DownOutlined, UserOutlined } from '@ant-design/icons'; function handleButtonClick(e) { message.info('Click on left button.'); console.log('click left button', e); } function handleMenuClick(e) { message.info('Click on menu item.'); console.log('click', e); } const menu = ( , }, { label: '2nd menu item', key: '2', icon: , }, { label: '3rd menu item', key: '3', icon: , }, ]} /> ); export default () => ( Dropdown }> Dropdown Dropdown [ {leftButton} , React.cloneElement(rightButton, { loading: true }), ]} > With Tooltip ); ```