home/ant-design
2
0
Fork 0
mirror of https://github.com/wahyd4/ant-design.git synced 2026-08-21 02:36:28 +10:00
Code Issues Packages Projects Releases Wiki Activity
Files
gh-pages
ant-design/components/button/index.html
T
afc163 340f90bafe Updates
2017-06-13 15:28:13 +08:00

332 lines
113 KiB
HTML
Raw Permalink Blame History

This file contains invisible Unicode characters
This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="An enterprise-class UI design language and React-based implementation">
<meta name="description" content="A set of high-quality React components">
<meta name="description" content="One of best React UI library for enterprise background">
<title>Ant Design - A UI Design Language</title>
<script>
(function() {
function isLocalStorageNameSupported() {
var testKey = 'test';
var storage = window.localStorage;
try {
storage.setItem(testKey, '1');
storage.removeItem(testKey);
return true;
} catch (error) {
return false;
}
}
// 优先级提高到所有静态资源的前面，语言不对，加载其他静态资源没意义
var pathname = location.pathname;
function isZhCN(pathname) {
return /-cn\/?$/.test(pathname);
}
function getLocalizedPathname(path, zhCN) {
var pathname = path.startsWith('/') ? path : '/' + path;
if (!zhCN) { // to enUS
return /\/?index-cn/.test(pathname) ? '/' : pathname.replace('-cn', '');
} else if (pathname === '/') {
return '/index-cn';
} else if (pathname.endsWith('/')) {
return pathname.replace(/\/$/, '-cn/');
}
return pathname + '-cn';
}
// 兼容旧的 URL， `?locale=...`
var queryString = location.search;
if (queryString) {
var isZhCNConfig = queryString.indexOf('zh-CN') > -1;
if (isZhCNConfig && !isZhCN(pathname)) {
location.pathname = getLocalizedPathname(pathname, isZhCNConfig)
}
}
// 首页无视链接里面的语言设置 https://github.com/ant-design/ant-design/issues/4552
if (isLocalStorageNameSupported() && (pathname === '/' || pathname === '/index-cn')) {
var lang = (window.localStorage && localStorage.getItem('locale')) || (navigator.language.toLowerCase() === 'zh-cn' ? 'zh-CN' : 'en-US');
// safari is 'zh-cn', while other browser is 'zh-CN';
if ((lang === 'zh-CN') !== isZhCN(pathname)) {
location.pathname = getLocalizedPathname(pathname, lang === 'zh-CN');
}
}
document.documentElement.className += isZhCN(pathname) ? 'zh-cn' : 'en-us';
})()
</script>
<link rel="icon" href="https://t.alipayobjects.com/images/T1QUBfXo4fXXXXXXXX.png" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.cnpmjs.org/css?family=Lato:400,700|Raleway"/>
<link rel="stylesheet" type="text/css" href="/index-1.css"/>
<link rel="stylesheet" type="text/css" href="/index-2.css"/>
<style id="nprogress-style">
#nprogress { display: none }
</style>
<!--[if lte IE 10]>
<script
src="https://as.alipayobjects.com/g/component/??console-polyfill/0.2.2/index.js,media-match/2.0.2/media.match.min.js"></script>
<![endif]-->
<script>
if (!window.Intl) {
document.writeln('<script src="https://as.alipayobjects.com/g/component/intl/1.0.1/??Intl.js,locale-data/jsonp/en.js,locale-data/jsonp/zh.js">' + '<' + '/script>');
}
if (!window.Promise) {
document.writeln('<script src="https://as.alipayobjects.com/g/component/es6-promise/3.2.2/es6-promise.min.js"' + '>' + '<' + '/' + 'script>');
}
// Enable Google Analytics
if (!location.port) {
/* eslint-disable */
(function (i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r;
i[r] = i[r] || function () {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date();
a = s.createElement(o),
m = s.getElementsByTagName(o)[0];
a.async = 1;
a.src = g;
m.parentNode.insertBefore(a, m)
})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
ga('create', 'UA-72788897-1', 'auto');
ga('send', 'pageview');
/* eslint-enable */
}
</script>
<!-- Hotjar Tracking Code for ant.design -->
<script>
(function(h,o,t,j,a,r){
h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
h._hjSettings={hjid:473408,hjsv:5};
a=o.getElementsByTagName('head')[0];
r=o.createElement('script');r.async=1;
r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
a.appendChild(r);
})(window,document,'//static.hotjar.com/c/hotjar-','.js?sv=');
</script>
</head>
<body>
<div id="react-content">
<div class="page-wrapper" data-reactroot="" data-reactid="1" data-react-checksum="-1222437949"><header id="header" class="clearfix" data-reactid="2"><div class="ant-row" data-reactid="3"><div class="ant-col-xs-24 ant-col-sm-24 ant-col-md-5 ant-col-lg-4" data-reactid="4"><a id="logo" href="/" data-reactid="5"><img alt="logo" src="https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg" data-reactid="6"/><span data-reactid="7">Ant Design</span></a></div><div class="ant-col-xs-0 ant-col-sm-0 ant-col-md-19 ant-col-lg-20" data-reactid="8"><div id="search-box" data-reactid="9"><div class="ant-select ant-select-combobox ant-select-enabled" data-reactid="10"><div class="ant-select-selection
ant-select-selection--single" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" data-reactid="11"><div class="ant-select-selection__rendered" data-reactid="12"><div style="display:block;user-select:none;-webkit-user-select:none;" unselectable="unselectable" class="ant-select-selection__placeholder" data-reactid="13">Search Components...</div><ul data-reactid="14"><li class="ant-select-search ant-select-search--inline" data-reactid="15"><div class="ant-select-search__field__wrap" data-reactid="16"><input value="" class="ant-select-search__field" data-reactid="17"/><span class="ant-select-search__field__mirror" data-reactid="18"><!-- react-text: 19 --><!-- /react-text --><!-- react-text: 20 --> <!-- /react-text --></span></div></li></ul></div><span class="ant-select-arrow" style="user-select:none;-webkit-user-select:none;" unselectable="unselectable" data-reactid="21"><b data-reactid="22"></b></span></div></div></div><button type="button" class="ant-btn ant-btn-ghost ant-btn-sm lang" data-reactid="23"><span data-reactid="24">中文</span></button><div class="ant-select-sm version ant-select ant-select-enabled" data-reactid="25"><div class="ant-select-selection
ant-select-selection--single" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" tabindex="0" data-reactid="26"><div class="ant-select-selection__rendered" data-reactid="27"><div class="ant-select-selection-selected-value" title="2.11.0" style="display:block;opacity:1;" data-reactid="28">2.11.0</div></div><span class="ant-select-arrow" style="user-select:none;-webkit-user-select:none;" unselectable="unselectable" data-reactid="29"><b data-reactid="30"></b></span></div></div><ul class="ant-menu ant-menu-horizontal ant-menu-light ant-menu-root" role="menu" aria-activedescendant="" id="nav" tabindex="0" data-reactid="31"><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="32"><a href="/" data-reactid="33"><span data-reactid="34">Home</span></a></li><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="35"><a href="/docs/spec/introduce" data-reactid="36"><span data-reactid="37">Guidelines</span></a></li><li class="ant-menu-item-selected ant-menu-item" role="menuitem" aria-selected="true" data-reactid="38"><a href="/docs/react/introduce" data-reactid="39"><span data-reactid="40">Components</span></a></li><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="41"><a href="/docs/pattern/navigation" data-reactid="42"><span data-reactid="43">Patterns</span></a></li><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="44"><a href="/docs/resource/download" data-reactid="45"><span data-reactid="46">Resources</span></a></li><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="47"><a href="//mobile.ant.design" data-reactid="48"><span data-reactid="49">Mobile</span></a></li></ul></div></div></header><div class="main-wrapper" data-reactid="50"><div class="ant-row" data-reactid="51"><div class="ant-col-xs-24 ant-col-sm-24 ant-col-md-6 ant-col-lg-4" data-reactid="52"><ul class="ant-menu ant-menu-inline aside-container ant-menu-light ant-menu-root" role="menu" aria-activedescendant="" tabindex="0" data-reactid="53"><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="54"><a href="/docs/react/introduce" data-reactid="55">Ant Design of React</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="56"><a href="/docs/react/getting-started" data-reactid="57">Getting Started</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="58"><a href="/docs/react/practical-projects" data-reactid="59">Real project with dva</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="60"><a href="/docs/react/use-with-create-react-app" data-reactid="61">Use in create-react-app</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="62"><a href="/docs/react/customize-theme" data-reactid="63">Customize Theme</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="64"><a href="/changelog" data-reactid="65">Change Log</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="66"><a href="/docs/react/recommendation" data-reactid="67">Third-Party Libraries</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="68"><a href="/docs/react/i18n" data-reactid="69">Internationalization</a></li><li class="ant-menu-submenu-inline ant-menu-submenu-open ant-menu-submenu-selected ant-menu-submenu" data-reactid="70"><div style="padding-left:24px;" class="ant-menu-submenu-title" aria-expanded="true" aria-owns="Components$Menu" aria-haspopup="true" data-reactid="71"><h4 data-reactid="72">Components</h4></div><ul class="ant-menu ant-menu-inline ant-menu-sub" role="menu" aria-activedescendant="" id="Components$Menu" data-reactid="73"><li class=" ant-menu-item-group" data-reactid="74"><div class="ant-menu-item-group-title" data-reactid="75">General</div><ul class="ant-menu-item-group-list" data-reactid="76"><li style="padding-left:48px;" class="ant-menu-item-selected ant-menu-item" role="menuitem" aria-selected="true" data-reactid="77"><a href="/components/button/" data-reactid="78"><span data-reactid="79">Button</span><span class="chinese" data-reactid="80"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="81"><a href="/components/icon/" data-reactid="82"><span data-reactid="83">Icon</span><span class="chinese" data-reactid="84"></span></a></li></ul></li><li class=" ant-menu-item-group" data-reactid="85"><div class="ant-menu-item-group-title" data-reactid="86">Layout</div><ul class="ant-menu-item-group-list" data-reactid="87"><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="88"><a href="/components/grid/" data-reactid="89"><span data-reactid="90">Grid</span><span class="chinese" data-reactid="91"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="92"><a href="/components/layout/" data-reactid="93"><span data-reactid="94">Layout</span><span class="chinese" data-reactid="95"></span></a></li></ul></li><li class=" ant-menu-item-group" data-reactid="96"><div class="ant-menu-item-group-title" data-reactid="97">Navigation</div><ul class="ant-menu-item-group-list" data-reactid="98"><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="99"><a href="/components/affix/" data-reactid="100"><span data-reactid="101">Affix</span><span class="chinese" data-reactid="102"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="103"><a href="/components/breadcrumb/" data-reactid="104"><span data-reactid="105">Breadcrumb</span><span class="chinese" data-reactid="106"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="107"><a href="/components/back-top/" data-reactid="108"><span data-reactid="109">BackTop</span><span class="chinese" data-reactid="110"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="111"><a href="/components/dropdown/" data-reactid="112"><span data-reactid="113">Dropdown</span><span class="chinese" data-reactid="114"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="115"><a href="/components/menu/" data-reactid="116"><span data-reactid="117">Menu</span><span class="chinese" data-reactid="118"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="119"><a href="/components/pagination/" data-reactid="120"><span data-reactid="121">Pagination</span><span class="chinese" data-reactid="122"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="123"><a href="/components/steps/" data-reactid="124"><span data-reactid="125">Steps</span><span class="chinese" data-reactid="126"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="127"><a href="/components/tabs/" data-reactid="128"><span data-reactid="129">Tabs</span><span class="chinese" data-reactid="130"></span></a></li></ul></li><li class=" ant-menu-item-group" data-reactid="131"><div class="ant-menu-item-group-title" data-reactid="132">Data Entry</div><ul class="ant-menu-item-group-list" data-reactid="133"><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="134"><a href="/components/auto-complete/" data-reactid="135"><span data-reactid="136">AutoComplete</span><span class="chinese" data-reactid="137"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="138"><a href="/components/cascader/" data-reactid="139"><span data-reactid="140">Cascader</span><span class="chinese" data-reactid="141"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="142"><a href="/components/checkbox/" data-reactid="143"><span data-reactid="144">Checkbox</span><span class="chinese" data-reactid="145"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="146"><a href="/components/date-picker/" data-reactid="147"><span data-reactid="148">DatePicker</span><span class="chinese" data-reactid="149"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="150"><a href="/components/form/" data-reactid="151"><span data-reactid="152">Form</span><span class="chinese" data-reactid="153"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="154"><a href="/components/input-number/" data-reactid="155"><span data-reactid="156">InputNumber</span><span class="chinese" data-reactid="157"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="158"><a href="/components/input/" data-reactid="159"><span data-reactid="160">Input</span><span class="chinese" data-reactid="161"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="162"><a href="/components/mention/" data-reactid="163"><span data-reactid="164">Mention</span><span class="chinese" data-reactid="165"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="166"><a href="/components/rate/" data-reactid="167"><span data-reactid="168">Rate</span><span class="chinese" data-reactid="169"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="170"><a href="/components/radio/" data-reactid="171"><span data-reactid="172">Radio</span><span class="chinese" data-reactid="173"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="174"><a href="/components/select/" data-reactid="175"><span data-reactid="176">Select</span><span class="chinese" data-reactid="177"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="178"><a href="/components/slider/" data-reactid="179"><span data-reactid="180">Slider</span><span class="chinese" data-reactid="181"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="182"><a href="/components/switch/" data-reactid="183"><span data-reactid="184">Switch</span><span class="chinese" data-reactid="185"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="186"><a href="/components/tree-select/" data-reactid="187"><span data-reactid="188">TreeSelect</span><span class="chinese" data-reactid="189"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="190"><a href="/components/time-picker/" data-reactid="191"><span data-reactid="192">TimePicker</span><span class="chinese" data-reactid="193"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="194"><a href="/components/transfer/" data-reactid="195"><span data-reactid="196">Transfer</span><span class="chinese" data-reactid="197"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="198"><a href="/components/upload/" data-reactid="199"><span data-reactid="200">Upload</span><span class="chinese" data-reactid="201"></span></a></li></ul></li><li class=" ant-menu-item-group" data-reactid="202"><div class="ant-menu-item-group-title" data-reactid="203">Data Display</div><ul class="ant-menu-item-group-list" data-reactid="204"><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="205"><a href="/components/avatar/" data-reactid="206"><span data-reactid="207">Avatar</span><span class="chinese" data-reactid="208"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="209"><a href="/components/badge/" data-reactid="210"><span data-reactid="211">Badge</span><span class="chinese" data-reactid="212"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="213"><a href="/components/collapse/" data-reactid="214"><span data-reactid="215">Collapse</span><span class="chinese" data-reactid="216"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="217"><a href="/components/calendar/" data-reactid="218"><span data-reactid="219">Calendar</span><span class="chinese" data-reactid="220"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="221"><a href="/components/card/" data-reactid="222"><span data-reactid="223">Card</span><span class="chinese" data-reactid="224"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="225"><a href="/components/carousel/" data-reactid="226"><span data-reactid="227">Carousel</span><span class="chinese" data-reactid="228"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="229"><a href="/components/popover/" data-reactid="230"><span data-reactid="231">Popover</span><span class="chinese" data-reactid="232"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="233"><a href="/components/tooltip/" data-reactid="234"><span data-reactid="235">Tooltip</span><span class="chinese" data-reactid="236"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="237"><a href="/components/table/" data-reactid="238"><span data-reactid="239">Table</span><span class="chinese" data-reactid="240"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="241"><a href="/components/tag/" data-reactid="242"><span data-reactid="243">Tag</span><span class="chinese" data-reactid="244"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="245"><a href="/components/timeline/" data-reactid="246"><span data-reactid="247">Timeline</span><span class="chinese" data-reactid="248"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="249"><a href="/components/tree/" data-reactid="250"><span data-reactid="251">Tree</span><span class="chinese" data-reactid="252"></span></a></li></ul></li><li class=" ant-menu-item-group" data-reactid="253"><div class="ant-menu-item-group-title" data-reactid="254">Feedback</div><ul class="ant-menu-item-group-list" data-reactid="255"><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="256"><a href="/components/alert/" data-reactid="257"><span data-reactid="258">Alert</span><span class="chinese" data-reactid="259"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="260"><a href="/components/modal/" data-reactid="261"><span data-reactid="262">Modal</span><span class="chinese" data-reactid="263"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="264"><a href="/components/message/" data-reactid="265"><span data-reactid="266">Message</span><span class="chinese" data-reactid="267"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="268"><a href="/components/notification/" data-reactid="269"><span data-reactid="270">Notification</span><span class="chinese" data-reactid="271"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="272"><a href="/components/progress/" data-reactid="273"><span data-reactid="274">Progress</span><span class="chinese" data-reactid="275"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="276"><a href="/components/popconfirm/" data-reactid="277"><span data-reactid="278">Popconfirm</span><span class="chinese" data-reactid="279"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="280"><a href="/components/spin/" data-reactid="281"><span data-reactid="282">Spin</span><span class="chinese" data-reactid="283"></span></a></li></ul></li><li class=" ant-menu-item-group" data-reactid="284"><div class="ant-menu-item-group-title" data-reactid="285">Other</div><ul class="ant-menu-item-group-list" data-reactid="286"><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="287"><a href="/components/anchor/" data-reactid="288"><span data-reactid="289">Anchor</span><span class="chinese" data-reactid="290"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="291"><a href="/components/locale-provider/" data-reactid="292"><span data-reactid="293">LocaleProvider</span><span class="chinese" data-reactid="294"></span></a></li></ul></li></ul></li></ul></div><div class="main-container main-container-component ant-col-xs-24 ant-col-sm-24 ant-col-md-18 ant-col-lg-20" data-reactid="295"><article data-reactid="296"><div class="toc-affix" data-reactid="297"><div class="" data-reactid="298"><ul class="toc demos-anchor" data-reactid="299"><li title="Type" data-reactid="300"><a href="#components-button-demo-basic" data-reactid="301">Type</a></li><li title="Icon" data-reactid="302"><a href="#components-button-demo-icon" data-reactid="303">Icon</a></li><li title="Size" data-reactid="304"><a href="#components-button-demo-size" data-reactid="305">Size</a></li><li title="Disabled" data-reactid="306"><a href="#components-button-demo-disabled" data-reactid="307">Disabled</a></li><li title="Loading" data-reactid="308"><a href="#components-button-demo-loading" data-reactid="309">Loading</a></li><li title="Multiple Buttons" data-reactid="310"><a href="#components-button-demo-multiple" data-reactid="311">Multiple Buttons</a></li><li title="Button Group" data-reactid="312"><a href="#components-button-demo-button-group" data-reactid="313">Button Group</a></li><li title="Ghost Button" data-reactid="314"><a href="#components-button-demo-ghost" data-reactid="315">Ghost Button</a></li></ul></div></div><section class="markdown" data-reactid="316"><h1 data-reactid="317"><!-- react-text: 318 -->Button<!-- /react-text --><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/button/index.en-US.md" data-reactid="319"><i class="anticon anticon-edit" data-reactid="320"></i></a></h1><section class="markdown" data-reactid="321"><p data-reactid="322"><!-- react-text: 323 -->To trigger an operation.<!-- /react-text --></p><h2 id="When-To-Use" data-reactid="324"><span data-reactid="325"><!-- react-text: 326 -->When To Use<!-- /react-text --></span><a href="#When-To-Use" class="anchor" data-reactid="327">#</a></h2><p data-reactid="328"><!-- react-text: 329 -->A button means an operation (or a series of operations). Clicking a button will trigger corresponding business logic.<!-- /react-text --></p></section><h2 data-reactid="330"><span data-reactid="331">Examples</span><i class="anticon anticon-appstore code-box-expand-trigger" title="展开全部代码" data-reactid="332"></i></h2></section><div class="ant-row" style="margin-left:-8px;margin-right:-8px;" data-reactid="333"><div style="padding-left:8px;padding-right:8px;" class="ant-col-12 code-boxes-col-2-1" data-reactid="334"><section class="code-box" id="components-button-demo-basic" data-reactid="335"><section class="code-box-demo" data-reactid="336"><div data-reactid="337"><button type="button" class="ant-btn ant-btn-primary" data-reactid="338"><span data-reactid="339">Primary</span></button><button type="button" class="ant-btn" data-reactid="340"><span data-reactid="341">Default</span></button><button type="button" class="ant-btn ant-btn-dashed" data-reactid="342"><span data-reactid="343">Dashed</span></button><button type="button" class="ant-btn ant-btn-danger" data-reactid="344"><span data-reactid="345">Danger</span></button></div></section><section class="code-box-meta markdown" data-reactid="346"><div class="code-box-title" data-reactid="347"><a href="#components-button-demo-basic" data-reactid="348">Type</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/button/demo/basic.md" data-reactid="349"><i class="anticon anticon-edit" data-reactid="350"></i></a></div><div data-reactid="351"><p data-reactid="352"><!-- react-text: 353 -->There are <!-- /react-text --><code data-reactid="354"><!-- react-text: 355 -->primary<!-- /react-text --></code><!-- react-text: 356 --> button, <!-- /react-text --><code data-reactid="357"><!-- react-text: 358 -->default<!-- /react-text --></code><!-- react-text: 359 --> button, <!-- /react-text --><code data-reactid="360"><!-- react-text: 361 -->dashed<!-- /react-text --></code><!-- react-text: 362 --> button and <!-- /react-text --><code data-reactid="363"><!-- react-text: 364 -->danger<!-- /react-text --></code><!-- react-text: 365 --> button in antd.<!-- /react-text --></p><blockquote data-reactid="366"><p data-reactid="367"><code data-reactid="368"><!-- react-text: 369 -->danger<!-- /react-text --></code><!-- react-text: 370 --> is supported after <!-- /react-text --><code data-reactid="371"><!-- react-text: 372 -->antd@2.7<!-- /react-text --></code><!-- react-text: 373 -->.<!-- /react-text --></p></blockquote></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="374"></i></section><section class="highlight-wrapper" data-reactid="375"><div class="highlight" data-reactid="376"><i class="anticon anticon-copy code-box-code-copy" data-reactid="377"></i><pre class="language-jsx" data-reactid="378"><code data-reactid="379"><span class="token keyword">import</span> <span class="token punctuation">{</span> Button <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>
ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Primary<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span><span class="token punctuation">></span></span>Default<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>dashed<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Dashed<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>danger<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Danger<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
<span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div></section></section><section class="code-box" id="components-button-demo-size" data-reactid="380"><section class="code-box-demo" data-reactid="381"><div data-reactid="382"><div class="ant-radio-group" data-reactid="383"><label class="ant-radio-button-wrapper" data-reactid="384"><span class="ant-radio-button" data-reactid="385"><input type="radio" class="ant-radio-button-input" data-reactid="386"/><span class="ant-radio-button-inner" data-reactid="387"></span></span><span data-reactid="388">Large</span></label><label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked" data-reactid="389"><span class="ant-radio-button ant-radio-button-checked" data-reactid="390"><input type="radio" class="ant-radio-button-input" checked="" data-reactid="391"/><span class="ant-radio-button-inner" data-reactid="392"></span></span><span data-reactid="393">Default</span></label><label class="ant-radio-button-wrapper" data-reactid="394"><span class="ant-radio-button" data-reactid="395"><input type="radio" class="ant-radio-button-input" data-reactid="396"/><span class="ant-radio-button-inner" data-reactid="397"></span></span><span data-reactid="398">Small</span></label></div><br data-reactid="399"/><br data-reactid="400"/><button type="button" class="ant-btn ant-btn-primary ant-btn-circle ant-btn-icon-only" data-reactid="401"><i class="anticon anticon-download" data-reactid="402"></i></button><button type="button" class="ant-btn ant-btn-primary" data-reactid="403"><i class="anticon anticon-download" data-reactid="404"></i><span data-reactid="405">Download</span></button><button type="button" class="ant-btn ant-btn-primary" data-reactid="406"><span data-reactid="407">Normal</span></button><br data-reactid="408"/><div class="ant-btn-group" data-reactid="409"><button type="button" class="ant-btn ant-btn-primary" data-reactid="410"><i class="anticon anticon-left" data-reactid="411"></i><span data-reactid="412">Backward</span></button><button type="button" class="ant-btn ant-btn-primary" data-reactid="413"><span data-reactid="414">Forward</span><i class="anticon anticon-right" data-reactid="415"></i></button></div></div></section><section class="code-box-meta markdown" data-reactid="416"><div class="code-box-title" data-reactid="417"><a href="#components-button-demo-size" data-reactid="418">Size</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/button/demo/size.md" data-reactid="419"><i class="anticon anticon-edit" data-reactid="420"></i></a></div><div data-reactid="421"><p data-reactid="422"><!-- react-text: 423 -->Ant Design supports a default button size as well as a large and small size.<!-- /react-text --></p><p data-reactid="424"><!-- react-text: 425 -->If a large or small button is desired, set the <!-- /react-text --><code data-reactid="426"><!-- react-text: 427 -->size<!-- /react-text --></code><!-- react-text: 428 --> property to either <!-- /react-text --><code data-reactid="429"><!-- react-text: 430 -->large<!-- /react-text --></code><!-- react-text: 431 --> or <!-- /react-text --><code data-reactid="432"><!-- react-text: 433 -->small<!-- /react-text --></code><!-- react-text: 434 --> respectively. Omit the <!-- /react-text --><code data-reactid="435"><!-- react-text: 436 -->size<!-- /react-text --></code><!-- react-text: 437 --> property for a button with the default size.<!-- /react-text --></p></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="438"></i></section><section class="highlight-wrapper" data-reactid="439"><div class="highlight" data-reactid="440"><i class="anticon anticon-copy code-box-code-copy" data-reactid="441"></i><pre class="language-jsx" data-reactid="442"><code data-reactid="443"><span class="token keyword">import</span> <span class="token punctuation">{</span> Button<span class="token punctuation">,</span> Radio<span class="token punctuation">,</span> Icon <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>
<span class="token keyword">class</span> <span class="token class-name">ButtonSize</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
state <span class="token operator">=</span> <span class="token punctuation">{</span>
size<span class="token punctuation">:</span> <span class="token string">'default'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
handleSizeChange <span class="token operator">=</span> <span class="token punctuation">(</span>e<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span> size<span class="token punctuation">:</span> e<span class="token punctuation">.</span>target<span class="token punctuation">.</span>value <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">const</span> size <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>size<span class="token punctuation">;</span>
<span class="token keyword">return</span> <span class="token punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Radio.Group</span> <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>size<span class="token punctuation">}</span></span> <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>handleSizeChange<span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Radio.Button</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>large<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Large<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Radio.Button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Radio.Button</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>default<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Default<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Radio.Button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Radio.Button</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>small<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Small<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Radio.Button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Radio.Group</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span> <span class="token attr-name">shape</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>circle<span class="token punctuation">"</span></span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>download<span class="token punctuation">"</span></span> <span class="token attr-name">size</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>size<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>download<span class="token punctuation">"</span></span> <span class="token attr-name">size</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>size<span class="token punctuation">}</span></span><span class="token punctuation">></span></span>Download<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span> <span class="token attr-name">size</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>size<span class="token punctuation">}</span></span><span class="token punctuation">></span></span>Normal<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button.Group</span> <span class="token attr-name">size</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>size<span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Icon</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>left<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>Backward
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
Forward<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Icon</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>right<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Button.Group</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ButtonSize</span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div></section></section><section class="code-box" id="components-button-demo-loading" data-reactid="444"><section class="code-box-demo" data-reactid="445"><span data-reactid="446"><button type="button" class="ant-btn ant-btn-primary ant-btn-loading" data-reactid="447"><i class="anticon anticon-spin anticon-loading" data-reactid="448"></i><span data-reactid="449">Loading</span></button><button type="button" class="ant-btn ant-btn-primary ant-btn-sm ant-btn-loading" data-reactid="450"><i class="anticon anticon-spin anticon-loading" data-reactid="451"></i><span data-reactid="452">Loading</span></button><br data-reactid="453"/><button type="button" class="ant-btn ant-btn-primary" data-reactid="454"><span data-reactid="455">Click me!</span></button><button type="button" class="ant-btn ant-btn-primary" data-reactid="456"><i class="anticon anticon-poweroff" data-reactid="457"></i><span data-reactid="458">Click me!</span></button><br data-reactid="459"/><button type="button" class="ant-btn ant-btn-circle ant-btn-loading" data-reactid="460"><i class="anticon anticon-spin anticon-loading" data-reactid="461"></i></button><button type="button" class="ant-btn ant-btn-primary ant-btn-circle ant-btn-loading" data-reactid="462"><i class="anticon anticon-spin anticon-loading" data-reactid="463"></i></button></span></section><section class="code-box-meta markdown" data-reactid="464"><div class="code-box-title" data-reactid="465"><a href="#components-button-demo-loading" data-reactid="466">Loading</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/button/demo/loading.md" data-reactid="467"><i class="anticon anticon-edit" data-reactid="468"></i></a></div><div data-reactid="469"><p data-reactid="470"><!-- react-text: 471 -->A loading indicator can be added to a button by setting the <!-- /react-text --><code data-reactid="472"><!-- react-text: 473 -->loading<!-- /react-text --></code><!-- react-text: 474 --> property on the <!-- /react-text --><code data-reactid="475"><!-- react-text: 476 -->Button<!-- /react-text --></code><!-- react-text: 477 -->.<!-- /react-text --></p></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="478"></i></section><section class="highlight-wrapper" data-reactid="479"><div class="highlight" data-reactid="480"><i class="anticon anticon-copy code-box-code-copy" data-reactid="481"></i><pre class="language-jsx" data-reactid="482"><code data-reactid="483"><span class="token keyword">import</span> <span class="token punctuation">{</span> Button <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>
<span class="token keyword">class</span> <span class="token class-name">App</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
state <span class="token operator">=</span> <span class="token punctuation">{</span>
loading<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
iconLoading<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span>
enterLoading <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span> loading<span class="token punctuation">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
enterIconLoading <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span> iconLoading<span class="token punctuation">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span> <span class="token attr-name">loading</span><span class="token punctuation">></span></span>
Loading
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>small<span class="token punctuation">"</span></span> <span class="token attr-name">loading</span><span class="token punctuation">></span></span>
Loading
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span> <span class="token attr-name">loading</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>loading<span class="token punctuation">}</span></span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>enterLoading<span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
Click me<span class="token operator">!</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>poweroff<span class="token punctuation">"</span></span> <span class="token attr-name">loading</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>iconLoading<span class="token punctuation">}</span></span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>enterIconLoading<span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
Click me<span class="token operator">!</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span> <span class="token attr-name">shape</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>circle<span class="token punctuation">"</span></span> <span class="token attr-name">loading</span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span> <span class="token attr-name">shape</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>circle<span class="token punctuation">"</span></span> <span class="token attr-name">loading</span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>App</span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div></section></section><section class="code-box" id="components-button-demo-button-group" data-reactid="484"><section class="code-box-demo" data-reactid="485"><div data-reactid="486"><h4 data-reactid="487">Basic</h4><div class="ant-btn-group" data-reactid="488"><button type="button" class="ant-btn" data-reactid="489"><span data-reactid="490">Cancel</span></button><button type="button" class="ant-btn ant-btn-primary" data-reactid="491"><span data-reactid="492">OK</span></button></div><div class="ant-btn-group" data-reactid="493"><button disabled="" type="button" class="ant-btn" data-reactid="494"><span data-reactid="495">L</span></button><button disabled="" type="button" class="ant-btn" data-reactid="496"><span data-reactid="497">M</span></button><button disabled="" type="button" class="ant-btn" data-reactid="498"><span data-reactid="499">R</span></button></div><div class="ant-btn-group" data-reactid="500"><button type="button" class="ant-btn ant-btn-primary" data-reactid="501"><span data-reactid="502">L</span></button><button type="button" class="ant-btn" data-reactid="503"><span data-reactid="504">M</span></button><button type="button" class="ant-btn" data-reactid="505"><span data-reactid="506">M</span></button><button type="button" class="ant-btn ant-btn-dashed" data-reactid="507"><span data-reactid="508">R</span></button></div><h4 data-reactid="509">With Icon</h4><div class="ant-btn-group" data-reactid="510"><button type="button" class="ant-btn ant-btn-primary" data-reactid="511"><i class="anticon anticon-left" data-reactid="512"></i><span data-reactid="513">Go back</span></button><button type="button" class="ant-btn ant-btn-primary" data-reactid="514"><span data-reactid="515">Go forward</span><i class="anticon anticon-right" data-reactid="516"></i></button></div><div class="ant-btn-group" data-reactid="517"><button type="button" class="ant-btn ant-btn-primary ant-btn-icon-only" data-reactid="518"><i class="anticon anticon-cloud" data-reactid="519"></i></button><button type="button" class="ant-btn ant-btn-primary ant-btn-icon-only" data-reactid="520"><i class="anticon anticon-cloud-download" data-reactid="521"></i></button></div></div><style data-reactid="522">
#components-button-demo-button-group h4 {
margin: 16px 0;
font-size: 14px;
line-height: 1;
font-weight: normal;
}
#components-button-demo-button-group h4:first-child {
margin-top: 0;
}
#components-button-demo-button-group .ant-btn-group {
margin-right: 8px;
}
</style></section><section class="code-box-meta markdown" data-reactid="523"><div class="code-box-title" data-reactid="524"><a href="#components-button-demo-button-group" data-reactid="525">Button Group</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/button/demo/button-group.md" data-reactid="526"><i class="anticon anticon-edit" data-reactid="527"></i></a></div><div data-reactid="528"><p data-reactid="529"><!-- react-text: 530 -->Buttons can be grouped by placing multiple <!-- /react-text --><code data-reactid="531"><!-- react-text: 532 -->Button<!-- /react-text --></code><!-- react-text: 533 --> components into a <!-- /react-text --><code data-reactid="534"><!-- react-text: 535 -->Button.Group<!-- /react-text --></code><!-- react-text: 536 -->.<!-- /react-text --></p><p data-reactid="537"><!-- react-text: 538 -->The <!-- /react-text --><code data-reactid="539"><!-- react-text: 540 -->size<!-- /react-text --></code><!-- react-text: 541 --> can be set to <!-- /react-text --><code data-reactid="542"><!-- react-text: 543 -->large<!-- /react-text --></code><!-- react-text: 544 -->, <!-- /react-text --><code data-reactid="545"><!-- react-text: 546 -->small<!-- /react-text --></code><!-- react-text: 547 --> or left unset resulting in a default size.<!-- /react-text --></p></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="548"></i></section><section class="highlight-wrapper" data-reactid="549"><div class="highlight" data-reactid="550"><i class="anticon anticon-copy code-box-code-copy" data-reactid="551"></i><pre class="language-jsx" data-reactid="552"><code data-reactid="553"><span class="token keyword">import</span> <span class="token punctuation">{</span> Button<span class="token punctuation">,</span> Icon <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> ButtonGroup <span class="token operator">=</span> Button<span class="token punctuation">.</span>Group<span class="token punctuation">;</span>
ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h4</span><span class="token punctuation">></span></span>Basic<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h4</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ButtonGroup</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span><span class="token punctuation">></span></span>Cancel<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>OK<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ButtonGroup</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ButtonGroup</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span> <span class="token attr-name">disabled</span><span class="token punctuation">></span></span>L<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span> <span class="token attr-name">disabled</span><span class="token punctuation">></span></span>M<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span> <span class="token attr-name">disabled</span><span class="token punctuation">></span></span>R<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ButtonGroup</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ButtonGroup</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>L<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span><span class="token punctuation">></span></span>M<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span><span class="token punctuation">></span></span>M<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>dashed<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>R<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ButtonGroup</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h4</span><span class="token punctuation">></span></span>With Icon<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h4</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ButtonGroup</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Icon</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>left<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>Go back
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
Go forward<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Icon</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>right<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ButtonGroup</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ButtonGroup</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>cloud<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>cloud-download<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ButtonGroup</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span><span class="token punctuation">,</span>
mountNode
<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div></section></section></div><div style="padding-left:8px;padding-right:8px;" class="ant-col-12 code-boxes-col-2-1" data-reactid="554"><section class="code-box" id="components-button-demo-icon" data-reactid="555"><section class="code-box-demo" data-reactid="556"><div data-reactid="557"><button type="button" class="ant-btn ant-btn-primary ant-btn-circle ant-btn-icon-only" data-reactid="558"><i class="anticon anticon-search" data-reactid="559"></i></button><button type="button" class="ant-btn ant-btn-primary" data-reactid="560"><i class="anticon anticon-search" data-reactid="561"></i><span data-reactid="562">Search</span></button><button type="button" class="ant-btn ant-btn-circle ant-btn-icon-only" data-reactid="563"><i class="anticon anticon-search" data-reactid="564"></i></button><button type="button" class="ant-btn" data-reactid="565"><i class="anticon anticon-search" data-reactid="566"></i><span data-reactid="567">Search</span></button><br data-reactid="568"/><button type="button" class="ant-btn ant-btn-circle ant-btn-icon-only" data-reactid="569"><i class="anticon anticon-search" data-reactid="570"></i></button><button type="button" class="ant-btn" data-reactid="571"><i class="anticon anticon-search" data-reactid="572"></i><span data-reactid="573">Search</span></button><button type="button" class="ant-btn ant-btn-dashed ant-btn-circle ant-btn-icon-only" data-reactid="574"><i class="anticon anticon-search" data-reactid="575"></i></button><button type="button" class="ant-btn ant-btn-dashed" data-reactid="576"><i class="anticon anticon-search" data-reactid="577"></i><span data-reactid="578">Search</span></button></div></section><section class="code-box-meta markdown" data-reactid="579"><div class="code-box-title" data-reactid="580"><a href="#components-button-demo-icon" data-reactid="581">Icon</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/button/demo/icon.md" data-reactid="582"><i class="anticon anticon-edit" data-reactid="583"></i></a></div><div data-reactid="584"><p data-reactid="585"><code data-reactid="586"><!-- react-text: 587 -->Button<!-- /react-text --></code><!-- react-text: 588 --> components can contain an <!-- /react-text --><code data-reactid="589"><!-- react-text: 590 -->Icon<!-- /react-text --></code><!-- react-text: 591 -->. This is done by setting the <!-- /react-text --><code data-reactid="592"><!-- react-text: 593 -->icon<!-- /react-text --></code><!-- react-text: 594 --> property or placing an <!-- /react-text --><code data-reactid="595"><!-- react-text: 596 -->Icon<!-- /react-text --></code><!-- react-text: 597 --> component within the <!-- /react-text --><code data-reactid="598"><!-- react-text: 599 -->Button<!-- /react-text --></code></p><p data-reactid="600"><!-- react-text: 601 -->If you want specific control over the positioning and placement of the <!-- /react-text --><code data-reactid="602"><!-- react-text: 603 -->Icon<!-- /react-text --></code><!-- react-text: 604 -->, then that should be done by placing the <!-- /react-text --><code data-reactid="605"><!-- react-text: 606 -->Icon<!-- /react-text --></code><!-- react-text: 607 --> component within the <!-- /react-text --><code data-reactid="608"><!-- react-text: 609 -->Button<!-- /react-text --></code><!-- react-text: 610 --> rather than using the <!-- /react-text --><code data-reactid="611"><!-- react-text: 612 -->icon<!-- /react-text --></code><!-- react-text: 613 --> property.<!-- /react-text --></p></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="614"></i></section><section class="highlight-wrapper" data-reactid="615"><div class="highlight" data-reactid="616"><i class="anticon anticon-copy code-box-code-copy" data-reactid="617"></i><pre class="language-jsx" data-reactid="618"><code data-reactid="619"><span class="token keyword">import</span> <span class="token punctuation">{</span> Button <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>
ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span> <span class="token attr-name">shape</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>circle<span class="token punctuation">"</span></span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>search<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>search<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Search<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span> <span class="token attr-name">shape</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>circle<span class="token punctuation">"</span></span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>search<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>search<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Search<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span> <span class="token attr-name">shape</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>circle<span class="token punctuation">"</span></span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>search<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>search<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Search<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>dashed<span class="token punctuation">"</span></span> <span class="token attr-name">shape</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>circle<span class="token punctuation">"</span></span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>search<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>dashed<span class="token punctuation">"</span></span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>search<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Search<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span><span class="token punctuation">,</span>
mountNode
<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div></section></section><section class="code-box" id="components-button-demo-disabled" data-reactid="620"><section class="code-box-demo" data-reactid="621"><div data-reactid="622"><button type="button" class="ant-btn ant-btn-primary" data-reactid="623"><span data-reactid="624">Primary</span></button><button disabled="" type="button" class="ant-btn ant-btn-primary" data-reactid="625"><span data-reactid="626">Primary(disabled)</span></button><br data-reactid="627"/><button type="button" class="ant-btn" data-reactid="628"><span data-reactid="629">Default</span></button><button disabled="" type="button" class="ant-btn" data-reactid="630"><span data-reactid="631">Default(disabled)</span></button><br data-reactid="632"/><button type="button" class="ant-btn" data-reactid="633"><span data-reactid="634">Ghost</span></button><button disabled="" type="button" class="ant-btn" data-reactid="635"><span data-reactid="636">Ghost(disabled)</span></button><br data-reactid="637"/><button type="button" class="ant-btn ant-btn-dashed" data-reactid="638"><span data-reactid="639">Dashed</span></button><button disabled="" type="button" class="ant-btn ant-btn-dashed" data-reactid="640"><span data-reactid="641">Dashed(disabled)</span></button></div></section><section class="code-box-meta markdown" data-reactid="642"><div class="code-box-title" data-reactid="643"><a href="#components-button-demo-disabled" data-reactid="644">Disabled</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/button/demo/disabled.md" data-reactid="645"><i class="anticon anticon-edit" data-reactid="646"></i></a></div><div data-reactid="647"><p data-reactid="648"><!-- react-text: 649 -->To mark a button as disabled, add the <!-- /react-text --><code data-reactid="650"><!-- react-text: 651 -->disabled<!-- /react-text --></code><!-- react-text: 652 --> property to the <!-- /react-text --><code data-reactid="653"><!-- react-text: 654 -->Button<!-- /react-text --></code><!-- react-text: 655 -->.<!-- /react-text --></p></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="656"></i></section><section class="highlight-wrapper" data-reactid="657"><div class="highlight" data-reactid="658"><i class="anticon anticon-copy code-box-code-copy" data-reactid="659"></i><pre class="language-jsx" data-reactid="660"><code data-reactid="661"><span class="token keyword">import</span> <span class="token punctuation">{</span> Button <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>
ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Primary<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">></span></span><span class="token function">Primary</span><span class="token punctuation">(</span>disabled<span class="token punctuation">)</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span><span class="token punctuation">></span></span>Default<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span> <span class="token attr-name">disabled</span><span class="token punctuation">></span></span><span class="token function">Default</span><span class="token punctuation">(</span>disabled<span class="token punctuation">)</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span><span class="token punctuation">></span></span>Ghost<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span> <span class="token attr-name">disabled</span><span class="token punctuation">></span></span><span class="token function">Ghost</span><span class="token punctuation">(</span>disabled<span class="token punctuation">)</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>dashed<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Dashed<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>dashed<span class="token punctuation">"</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">></span></span><span class="token function">Dashed</span><span class="token punctuation">(</span>disabled<span class="token punctuation">)</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span><span class="token punctuation">,</span>
mountNode
<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div></section></section><section class="code-box" id="components-button-demo-multiple" data-reactid="662"><section class="code-box-demo" data-reactid="663"><div data-reactid="664"><button type="button" class="ant-btn ant-btn-primary" data-reactid="665"><span data-reactid="666">primary</span></button><button type="button" class="ant-btn" data-reactid="667"><span data-reactid="668">secondary</span></button><button type="button" class="ant-btn ant-dropdown-trigger" data-reactid="669"><span data-reactid="670">more </span><i class="anticon anticon-down" data-reactid="671"></i></button></div></section><section class="code-box-meta markdown" data-reactid="672"><div class="code-box-title" data-reactid="673"><a href="#components-button-demo-multiple" data-reactid="674">Multiple Buttons</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/button/demo/multiple.md" data-reactid="675"><i class="anticon anticon-edit" data-reactid="676"></i></a></div><div data-reactid="677"><p data-reactid="678"><!-- react-text: 679 -->If you need several buttons, we recommend that you use 1 primary button + n secondary buttons, and if there are more than three operations, you can group some of them into <!-- /react-text --><code data-reactid="680"><!-- react-text: 681 -->Dropdown.Button<!-- /react-text --></code><!-- react-text: 682 -->.<!-- /react-text --></p></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="683"></i></section><section class="highlight-wrapper" data-reactid="684"><div class="highlight" data-reactid="685"><i class="anticon anticon-copy code-box-code-copy" data-reactid="686"></i><pre class="language-jsx" data-reactid="687"><code data-reactid="688"><span class="token keyword">import</span> <span class="token punctuation">{</span> Button<span class="token punctuation">,</span> Menu<span class="token punctuation">,</span> Dropdown<span class="token punctuation">,</span> Icon <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>
<span class="token keyword">function</span> <span class="token function">handleMenuClick</span><span class="token punctuation">(</span>e<span class="token punctuation">)</span> <span class="token punctuation">{</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> e<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">const</span> menu <span class="token operator">=</span> <span class="token punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Menu</span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>handleMenuClick<span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Menu.Item</span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>1st item<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Menu.Item</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Menu.Item</span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>2nd item<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Menu.Item</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Menu.Item</span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>3rd item<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Menu.Item</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Menu</span><span class="token punctuation">></span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>primary<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span><span class="token punctuation">></span></span>secondary<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Dropdown</span> <span class="token attr-name">overlay</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>menu<span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span><span class="token punctuation">></span></span>
more <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Icon</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>down<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Dropdown</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span><span class="token punctuation">,</span>
mountNode
<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div></section></section><section class="code-box" id="components-button-demo-ghost" data-reactid="689"><section class="code-box-demo" data-reactid="690"><div style="background:rgb(190, 200, 200);padding:26px 16px 16px;" data-reactid="691"><button type="button" class="ant-btn ant-btn-primary ant-btn-background-ghost" data-reactid="692"><span data-reactid="693">Primary</span></button><button type="button" class="ant-btn ant-btn-background-ghost" data-reactid="694"><span data-reactid="695">Default</span></button><button type="button" class="ant-btn ant-btn-dashed ant-btn-background-ghost" data-reactid="696"><span data-reactid="697">Dashed</span></button><button type="button" class="ant-btn ant-btn-danger ant-btn-background-ghost" data-reactid="698"><span data-reactid="699">danger</span></button></div></section><section class="code-box-meta markdown" data-reactid="700"><div class="code-box-title" data-reactid="701"><a href="#components-button-demo-ghost" data-reactid="702">Ghost Button</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/button/demo/ghost.md" data-reactid="703"><i class="anticon anticon-edit" data-reactid="704"></i></a></div><div data-reactid="705"><p data-reactid="706"><code data-reactid="707"><!-- react-text: 708 -->ghost<!-- /react-text --></code><!-- react-text: 709 --> property will make button&#x27;s background transparent, it is common used in colored background.<!-- /react-text --></p></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="710"></i></section><section class="highlight-wrapper" data-reactid="711"><div class="highlight" data-reactid="712"><i class="anticon anticon-copy code-box-code-copy" data-reactid="713"></i><pre class="language-jsx" data-reactid="714"><code data-reactid="715"><span class="token keyword">import</span> <span class="token punctuation">{</span> Button <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>
ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> background<span class="token punctuation">:</span> <span class="token string">'rgb(190, 200, 200)'</span><span class="token punctuation">,</span> padding<span class="token punctuation">:</span> <span class="token string">'26px 16px 16px'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span> <span class="token attr-name">ghost</span><span class="token punctuation">></span></span>Primary<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span> <span class="token attr-name">ghost</span><span class="token punctuation">></span></span>Default<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>dashed<span class="token punctuation">"</span></span> <span class="token attr-name">ghost</span><span class="token punctuation">></span></span>Dashed<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>danger<span class="token punctuation">"</span></span> <span class="token attr-name">ghost</span><span class="token punctuation">></span></span>danger<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
<span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div></section></section></div></div><section class="markdown api-container" data-reactid="716"><h2 id="API" data-reactid="717"><span data-reactid="718"><!-- react-text: 719 -->API<!-- /react-text --></span><a href="#API" class="anchor" data-reactid="720">#</a></h2><p data-reactid="721"><!-- react-text: 722 -->To get a customized button, just set <!-- /react-text --><code data-reactid="723"><!-- react-text: 724 -->type<!-- /react-text --></code><!-- react-text: 725 -->/<!-- /react-text --><code data-reactid="726"><!-- react-text: 727 -->shape<!-- /react-text --></code><!-- react-text: 728 -->/<!-- /react-text --><code data-reactid="729"><!-- react-text: 730 -->size<!-- /react-text --></code><!-- react-text: 731 -->/<!-- /react-text --><code data-reactid="732"><!-- react-text: 733 -->loading<!-- /react-text --></code><!-- react-text: 734 -->/<!-- /react-text --><code data-reactid="735"><!-- react-text: 736 -->disabled<!-- /react-text --></code><!-- react-text: 737 -->.<!-- /react-text --></p><table data-reactid="738"><thead data-reactid="739"><tr data-reactid="740"><th data-reactid="741"><!-- react-text: 742 -->Property<!-- /react-text --></th><th data-reactid="743"><!-- react-text: 744 -->Description<!-- /react-text --></th><th data-reactid="745"><!-- react-text: 746 -->Type<!-- /react-text --></th><th data-reactid="747"><!-- react-text: 748 -->Default<!-- /react-text --></th></tr></thead><tbody data-reactid="749"><tr data-reactid="750"><td data-reactid="751"><!-- react-text: 752 -->type<!-- /react-text --></td><td data-reactid="753"><!-- react-text: 754 -->can be set to <!-- /react-text --><code data-reactid="755"><!-- react-text: 756 -->primary<!-- /react-text --></code><!-- react-text: 757 --> <!-- /react-text --><code data-reactid="758"><!-- react-text: 759 -->dashed<!-- /react-text --></code><!-- react-text: 760 --> <!-- /react-text --><code data-reactid="761"><!-- react-text: 762 -->danger<!-- /react-text --></code><!-- react-text: 763 -->(added in 2.7) or omitted<!-- /react-text --></td><td data-reactid="764"><!-- react-text: 765 -->string<!-- /react-text --></td><td data-reactid="766"><!-- react-text: 767 -->&#x27;default&#x27;<!-- /react-text --></td></tr><tr data-reactid="768"><td data-reactid="769"><!-- react-text: 770 -->htmlType<!-- /react-text --></td><td data-reactid="771"><!-- react-text: 772 -->to set the original <!-- /react-text --><code data-reactid="773"><!-- react-text: 774 -->type<!-- /react-text --></code><!-- react-text: 775 --> of <!-- /react-text --><code data-reactid="776"><!-- react-text: 777 -->button<!-- /react-text --></code><!-- react-text: 778 -->, see: <!-- /react-text --><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type" data-reactid="779"><!-- react-text: 780 -->MDN<!-- /react-text --></a></td><td data-reactid="781"><!-- react-text: 782 -->string<!-- /react-text --></td><td data-reactid="783"><code data-reactid="784"><!-- react-text: 785 -->button<!-- /react-text --></code></td></tr><tr data-reactid="786"><td data-reactid="787"><!-- react-text: 788 -->icon<!-- /react-text --></td><td data-reactid="789"><!-- react-text: 790 -->set the icon of button, see: Icon component<!-- /react-text --></td><td data-reactid="791"><!-- react-text: 792 -->string<!-- /react-text --></td><td data-reactid="793"><!-- react-text: 794 -->-<!-- /react-text --></td></tr><tr data-reactid="795"><td data-reactid="796"><!-- react-text: 797 -->shape<!-- /react-text --></td><td data-reactid="798"><!-- react-text: 799 -->can be set to <!-- /react-text --><code data-reactid="800"><!-- react-text: 801 -->circle<!-- /react-text --></code><!-- react-text: 802 --> or omitted<!-- /react-text --></td><td data-reactid="803"><!-- react-text: 804 -->string<!-- /react-text --></td><td data-reactid="805"><!-- react-text: 806 -->-<!-- /react-text --></td></tr><tr data-reactid="807"><td data-reactid="808"><!-- react-text: 809 -->size<!-- /react-text --></td><td data-reactid="810"><!-- react-text: 811 -->can be set to <!-- /react-text --><code data-reactid="812"><!-- react-text: 813 -->small<!-- /react-text --></code><!-- react-text: 814 --> <!-- /react-text --><code data-reactid="815"><!-- react-text: 816 -->large<!-- /react-text --></code><!-- react-text: 817 --> or omitted<!-- /react-text --></td><td data-reactid="818"><!-- react-text: 819 -->string<!-- /react-text --></td><td data-reactid="820"><code data-reactid="821"><!-- react-text: 822 -->default<!-- /react-text --></code></td></tr><tr data-reactid="823"><td data-reactid="824"><!-- react-text: 825 -->loading<!-- /react-text --></td><td data-reactid="826"><!-- react-text: 827 -->to set the loading status of button<!-- /react-text --></td><td data-reactid="828"><!-- react-text: 829 -->boolean <!-- /react-text --><!-- react-text: 830 -->|<!-- /react-text --><!-- react-text: 831 --> { delay: number }<!-- /react-text --></td><td data-reactid="832"><code data-reactid="833"><!-- react-text: 834 -->false<!-- /react-text --></code></td></tr><tr data-reactid="835"><td data-reactid="836"><!-- react-text: 837 -->onClick<!-- /react-text --></td><td data-reactid="838"><!-- react-text: 839 -->set the handler to handle <!-- /react-text --><code data-reactid="840"><!-- react-text: 841 -->click<!-- /react-text --></code><!-- react-text: 842 --> event<!-- /react-text --></td><td data-reactid="843"><!-- react-text: 844 -->function<!-- /react-text --></td><td data-reactid="845"><!-- react-text: 846 -->-<!-- /react-text --></td></tr><tr data-reactid="847"><td data-reactid="848"><!-- react-text: 849 -->ghost<!-- /react-text --></td><td data-reactid="850"><!-- react-text: 851 -->make background transparent and invert text and border color, added in 2.7<!-- /react-text --></td><td data-reactid="852"><!-- react-text: 853 -->boolean<!-- /react-text --></td><td data-reactid="854"><!-- react-text: 855 -->false<!-- /react-text --></td></tr></tbody></table><p data-reactid="856"><code data-reactid="857"><!-- react-text: 858 -->&lt;Button&gt;Hello world!&lt;/Button&gt;<!-- /react-text --></code><!-- react-text: 859 --> will be rendered into <!-- /react-text --><code data-reactid="860"><!-- react-text: 861 -->&lt;button&gt;Hello world!&lt;/button&gt;<!-- /react-text --></code><!-- react-text: 862 -->, and all the properties which are not listed above will be transferred to the <!-- /react-text --><code data-reactid="863"><!-- react-text: 864 -->&lt;button&gt;<!-- /react-text --></code><!-- react-text: 865 --> tag.<!-- /react-text --></p><style data-reactid="866">
[id^=components-button-demo-] .ant-btn {
margin-right: 8px;
margin-bottom: 12px;
}
[id^=components-button-demo-] .ant-btn-group > .ant-btn {
margin-right: 0;
}
</style></section></article></div></div><div class="ant-row" data-reactid="867"><div class="ant-col-xs-24 ant-col-sm-24 ant-col-md-18 ant-col-md-offset-6 ant-col-lg-20 ant-col-lg-offset-4" data-reactid="868"><section class="prev-next-nav" data-reactid="869"><a class="prev-page" href="/docs/react/i18n" data-reactid="870">Internationalization</a><a class="next-page" href="/components/icon/" data-reactid="871"><span data-reactid="872">Icon</span><span class="chinese" data-reactid="873"></span></a></section></div></div></div><footer id="footer" data-reactid="874"><ul data-reactid="875"><li data-reactid="876"><h2 data-reactid="877"><i class="anticon anticon-github" data-reactid="878"></i><!-- react-text: 879 --> GitHub<!-- /react-text --></h2><div data-reactid="880"><a target="_blank " href="https://github.com/ant-design/ant-design" data-reactid="881"><span data-reactid="882">Repository</span></a></div><div data-reactid="883"><a target="_blank " href="https://ant.design/docs/react/customize-theme" data-reactid="884"><span data-reactid="885">Customize Theme</span></a></div><div data-reactid="886"><a target="_blank " href="https://github.com/websemantics/awesome-ant-design" data-reactid="887"><span data-reactid="888">Awesome Ant Design</span></a></div></li><li data-reactid="889"><h2 data-reactid="890"><i class="anticon anticon-link" data-reactid="891"></i><!-- react-text: 892 --> <!-- /react-text --><span data-reactid="893">Links</span></h2><div data-reactid="894"><a href="https://design.alipay.com/" data-reactid="895"><span data-reactid="896">Ant Financial Design Platform</span></a></div><div data-reactid="897"><a href="http://mobile.ant.design" data-reactid="898">Ant Design Mobile</a><span data-reactid="899"> - </span><span data-reactid="900">Mobile UI</span></div><div data-reactid="901"><a href="http://scaffold.ant.design" data-reactid="902">Scaffolds</a><span data-reactid="903"> - </span><span data-reactid="904">Scaffold Market</span></div><div data-reactid="905"><a target="_blank" rel="noopener noreferrer" href="https://github.com/dvajs/dva" data-reactid="906">dva</a><!-- react-text: 907 --> - <!-- /react-text --><span data-reactid="908">Framework</span></div><div data-reactid="909"><a target="_blank" rel="noopener noreferrer" href="https://github.com/dvajs/dva-cli" data-reactid="910">dva-cli</a><!-- react-text: 911 --> -<!-- /react-text --><span data-reactid="912">Developer Tools</span></div><div data-reactid="913"><a target="_blank" rel="noopener noreferrer" href="https://eggjs.org/" data-reactid="914">Egg</a><span data-reactid="915"> - </span><span data-reactid="916">Enterprise Node Framework</span></div><div data-reactid="917"><a target="_blank" rel="noopener noreferrer" href="https://antv.alipay.com/" data-reactid="918">AntV</a><span data-reactid="919"> - </span><span data-reactid="920">Data Visualization</span></div><div data-reactid="921"><a target="_blank" rel="noopener noreferrer" href="http://motion.ant.design" data-reactid="922">Ant Motion</a><span data-reactid="923"> - </span><span data-reactid="924">Motion Solution</span></div><div data-reactid="925"><a target="_blank" rel="noopener noreferrer" href="http://library.ant.design/" data-reactid="926">AntD Library</a><span data-reactid="927"> - </span><span data-reactid="928">Axure library</span></div><div data-reactid="929"><a target="_blank" rel="noopener noreferrer" href="http://ux.ant.design" data-reactid="930">Ant UX</a><span data-reactid="931"> - </span><span data-reactid="932">Sitemap Template</span></div></li><li data-reactid="933"><h2 data-reactid="934"><i class="anticon anticon-customer-service" data-reactid="935"></i><!-- react-text: 936 --> <!-- /react-text --><span data-reactid="937">Community</span></h2><div data-reactid="938"><a href="/changelog" data-reactid="939"><span data-reactid="940">Change Log</span></a></div><div data-reactid="941"><a target="_blank" rel="noopener noreferrer" href="https://github.com/ant-design/ant-design/wiki/FAQ" data-reactid="942"><span data-reactid="943">FAQ</span></a></div><div data-reactid="944"><a target="_blank" rel="noopener noreferrer" href="https://gitter.im/ant-design/ant-design" data-reactid="945"><span data-reactid="946">Chat Room (中文)</span></a></div><div data-reactid="947"><a target="_blank" rel="noopener noreferrer" href="https://gitter.im/ant-design/ant-design-english" data-reactid="948"><span data-reactid="949">Chat Room (English)</span></a></div><div data-reactid="950"><a target="_blank" rel="noopener noreferrer" href="http://new-issue.ant.design/" data-reactid="951"><span data-reactid="952">Bug Report</span></a></div><div data-reactid="953"><a target="_blank" rel="noopener noreferrer" href="https://github.com/ant-design/ant-design/issues" data-reactid="954"><span data-reactid="955">Issues</span></a></div><div data-reactid="956"><a target="_blank" rel="noopener noreferrer" href="http://stackoverflow.com/questions/tagged/antd" data-reactid="957"><span data-reactid="958">StackOverflow</span></a></div><div data-reactid="959"><a target="_blank" rel="noopener noreferrer" href="https://segmentfault.com/t/antd" data-reactid="960"><span data-reactid="961">SegmentFault</span></a></div></li><li data-reactid="962"><h2 data-reactid="963"><!-- react-text: 964 -->Copyright © <!-- /react-text --><!-- react-text: 965 -->2017<!-- /react-text --></h2><div data-reactid="966"><span data-reactid="967">Created by AFUX</span></div><div data-reactid="968"><!-- react-text: 969 -->Built with <!-- /react-text --><a target="_blank" rel="noopener noreferrer" href="https://github.com/benjycui/bisheng" data-reactid="970">BiSheng</a></div></li></ul></footer></div>
</div>
<script src="/common.js"></script>
<script src="/index.js"></script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink