Merge pull request #368 from benjycui/feature-button

chore: replace `button` tag with `Button` component

components/affix/demo/basic.md

@@ -8,10 +8,11 @@
 
 ````jsx
 var Affix = antd.Affix;
+var Button = antd.Button;
 
 React.render(
   <Affix>
-    <button className="ant-btn ant-btn-primary">固定在顶部</button>
+    <Button type="primary">固定在顶部</Button>
   </Affix>
 , document.getElementById('components-affix-demo-basic'));
 ````

components/affix/demo/offset.md

@@ -8,10 +8,11 @@
 
 ````jsx
 var Affix = antd.Affix;
+var Button = antd.Button;
 
 React.render(
   <Affix offset={75}>
-    <button className="ant-btn ant-btn-primary">固定在距离顶部 75px 的位置</button>
+    <Button type="primary">固定在距离顶部 75px 的位置</Button>
   </Affix>
 , document.getElementById('components-affix-demo-offset'));
 ````

components/button/demo/menu.md

@@ -1,25 +0,0 @@
-# 菜单按钮
-
-- order: 5
-
-**注**: 下拉按钮的 icon 大小统一成 **10px**。
-
-> 更多交互，详见 [Dropdown 下拉菜单](http://ant.design/components/dropdown/)。
-
----
-
-````jsx
-var Icon = antd.Icon;
-
-React.render(
-<div className="nico-insert-code">
-  <button className="ant-btn ant-btn-primary ant-btn-menu">
-    <span>菜单按钮</span>
-    <Icon type="down" />
-  </button>
-  <button className="ant-btn ant-btn-ghost ant-btn-circle ant-btn-menu">
-    <Icon type="down" />
-  </button>
-</div>
-, document.getElementById('components-button-demo-menu'));
-````

components/checkbox/demo/controller.md

@@ -8,6 +8,7 @@
 
 ````jsx
 var Checkbox = antd.Checkbox;
+var Button = antd.Button;
 var container = document.getElementById('components-checkbox-demo-controller');
 
 var App = React.createClass({
@@ -30,15 +31,15 @@ var App = React.createClass({
         </label>
       </p>
       <p>
-        <button className="ant-btn ant-btn-primary ant-btn-sm"
+        <Button type="primary" size="sm"
           onClick={this.toggleChecked}>
           {!this.state.checked ? "选中":"取消"}
-        </button>
+        </Button>
-        <button style={{'marginLeft': '10px'}}
+        <Button style={{'marginLeft': '10px'}}
-          className="ant-btn ant-btn-primary ant-btn-sm"
+          type="primary" size="sm"
           onClick={this.toggleDisable}>
           {!this.state.disabled ? "不可用":"可用"}
-        </button>
+        </Button>
       </p>
     </div>;
   },

components/dropdown/demo/basic.md

@@ -9,6 +9,7 @@
 ````jsx
 var Menu = antd.Menu;
 var Dropdown = antd.Dropdown;
+var Button = antd.Button;
 var Icon = antd.Icon;
 
 var menu = <Menu>
@@ -25,9 +26,9 @@ var menu = <Menu>
 
 React.render(
   <Dropdown overlay={menu}>
-    <button className="ant-btn ant-btn-menu">
+    <Button>
       某按钮 <Icon type="down" />
-    </button>
+    </Button>
   </Dropdown>
 , document.getElementById('components-dropdown-demo-basic'));
 ````

components/dropdown/demo/event.md

@@ -9,6 +9,7 @@
 ````jsx
 var Menu = antd.Menu;
 var Dropdown = antd.Dropdown;
+var Button = antd.Button;
 var Icon = antd.Icon;
 var onSelect = function ({key}){
   alert('选中了菜单' + key);
@@ -22,9 +23,9 @@ var menu = <Menu onSelect={onSelect}>
 
 React.render(
   <Dropdown overlay={menu}>
-    <button className="ant-btn ant-btn-menu">
+    <Button>
       鼠标移入，点击菜单 <Icon type="down" />
-    </button>
+    </Button>
   </Dropdown>
 , document.getElementById('components-dropdown-demo-event'));
 ````

components/dropdown/demo/item.md

@@ -9,6 +9,7 @@
 ````jsx
 var Menu = antd.Menu;
 var Dropdown = antd.Dropdown;
+var Button = antd.Button;
 var Icon = antd.Icon;
 
 var menu = <Menu>
@@ -24,9 +25,9 @@ var menu = <Menu>
 
 React.render(
   <Dropdown overlay={menu}>
-    <button className="ant-btn ant-btn-menu">
+    <Button>
       鼠标移入 <Icon type="down" />
-    </button>
+    </Button>
   </Dropdown>
 , document.getElementById('components-dropdown-demo-item'));
 ````

components/dropdown/demo/trigger.md

@@ -9,6 +9,7 @@
 ````jsx
 var Menu = antd.Menu;
 var Dropdown = antd.Dropdown;
+var Button = antd.Button;
 var Icon = antd.Icon;
 
 var menu = <Menu>
@@ -24,14 +25,14 @@ var menu = <Menu>
 
 React.render(<div>
   <Dropdown overlay={menu} trigger="click">
-    <button className="ant-btn ant-btn-primary ant-btn-menu">
+    <Button type="primary">
       点击触发 <Icon type="down" />
-    </button>
+    </Button>
   </Dropdown>
   <Dropdown overlay={menu}>
-    <button className="ant-btn ant-btn-menu">
+    <Button>
       鼠标移入 <Icon type="down" />
-    </button>
+    </Button>
   </Dropdown>
 </div>, document.getElementById('components-dropdown-demo-trigger'));
 ````

components/enter-animation/demo/basic.md

@@ -8,6 +8,7 @@
 
 ````jsx
 var EnterAnimation = antd.EnterAnimation;
+var Button = antd.Button;
 
 var Test = React.createClass({
   getInitialState() {
@@ -24,7 +25,7 @@ var Test = React.createClass({
     return (
       <div>
         <div style={{marginBottom: 20}}>
-          <button className="ant-btn ant-btn-primary" onClick={this.onClick}>切换</button>
+          <Button type="primary" onClick={this.onClick}>切换</Button>
         </div>
         <EnterAnimation>
           {this.state.show ?

components/enter-animation/demo/enter-data.md

@@ -9,6 +9,7 @@
 
 ````jsx
 var EnterAnimation = antd.EnterAnimation;
+var Button = antd.Button;
 
 var Test = React.createClass({
   getInitialState() {
@@ -33,7 +34,7 @@ var Test = React.createClass({
     return (
       <div>
         <div style={{marginBottom: 20}}>
-          <button className="ant-btn ant-btn-primary" onClick={this.onClick}>切换</button>
+          <Button type="primary" onClick={this.onClick}>切换</Button>
         </div>
         <EnterAnimation enter={this.state.enter} leave={this.state.leave}>
         {this.state.show ? <div key='enter-data'>

components/enter-animation/demo/enter-leave.md

@@ -9,6 +9,7 @@
 
 ````jsx
 var EnterAnimation = antd.EnterAnimation;
+var Button = antd.Button;
 
 var Test = React.createClass({
   getInitialState() {
@@ -40,7 +41,7 @@ var Test = React.createClass({
     return (
       <div>
         <div style={{marginBottom: 20}}>
-          <button className="ant-btn ant-btn-primary" onClick={this.onClick}>切换</button>
+          <Button type="primary" onClick={this.onClick}>切换</Button>
         </div>
         <EnterAnimation enter={this.state.enter} leave={this.state.leave}>
           {this.state.show ? 

components/enter-animation/demo/form.md

@@ -13,6 +13,7 @@ var Option = Select.Option;
 var Checkbox = antd.Checkbox;
 var Radio = antd.Radio;
 var RadioGroup = antd.Radio.Group;
+var Button = antd.Button;
 
 var Test = React.createClass({
   getInitialState() {
@@ -43,7 +44,7 @@ var Test = React.createClass({
     return (
       <div>
         <div style={{marginBottom: 20, textAlign: 'center'}}>
-          <button className="ant-btn ant-btn-primary" onClick={this.onClick}>切换</button>
+          <Button type="primary" onClick={this.onClick}>切换</Button>
         </div>
         <EnterAnimation enter={this.state.enter} leave={this.state.leave} component='form' className="ant-form-horizontal">
           {this.state.show ? <div key='from'>
@@ -85,7 +86,7 @@ var Test = React.createClass({
             </div>
             <div className="row">
               <div className="col-16 col-offset-6">
-                <input type="submit" className="ant-btn ant-btn-primary" value="确 定" />
+                <Button type="primary">确定</Button>
               </div>
             </div>
           </div> : null}

components/enter-animation/demo/page.md

@@ -8,6 +8,7 @@
 
 ````jsx
 var EnterAnimation = antd.EnterAnimation;
+var Button = antd.Button;
 
 var Test = React.createClass({
   getInitialState() {
@@ -34,7 +35,7 @@ var Test = React.createClass({
     return (
       <div>
         <div style={{marginBottom: 20}}>
-          <button className="ant-btn ant-btn-primary" onClick={this.onClick}>切换</button>
+          <Button type="primary" onClick={this.onClick}>切换</Button>
         </div>
         <EnterAnimation enter={this.state.enter} leave={this.state.leave}>
           {this.state.show ? <div key='a'>

components/enter-animation/demo/style.md

@@ -9,6 +9,7 @@
 
 ````jsx
 var EnterAnimation = antd.EnterAnimation;
+var Button = antd.Button;
 
 var Test = React.createClass({
   getInitialState() {
@@ -35,7 +36,7 @@ var Test = React.createClass({
     return (
       <div>
         <div style={{marginBottom: 20}}>
-          <button className="ant-btn ant-btn-primary" onClick={this.onClick}>切换</button>
+          <Button type="primary" onClick={this.onClick}>切换</Button>
         </div>
         <EnterAnimation enter={this.state.enter} leave={this.state.leave}>
         {this.state.show ? <div key='enter-data'>

components/form/demo/horizontal-form.md

@@ -16,6 +16,7 @@
 var Checkbox = antd.Checkbox;
 var Radio = antd.Radio;
 var RadioGroup = antd.Radio.Group;
+var Button = antd.Button;
 
 React.render(
 <form className="ant-form-horizontal">
@@ -56,7 +57,7 @@ React.render(
   </div>
   <div className="row">
     <div className="col-16 col-offset-6">
-      <input type="submit" className="ant-btn ant-btn-primary" value="确 定" />
+      <Button type="primary">确定</Button>
     </div>
   </div>
 </form>

components/form/demo/inline-form.md

@@ -8,6 +8,7 @@
 
 ````jsx
 var Checkbox = antd.Checkbox;
+var Button = antd.Button;
 
 React.render(
 <form className="ant-form-inline">
@@ -24,7 +25,7 @@ React.render(
       <Checkbox /> 记住我
     </label>
   </div>
-  <input type="submit" className="ant-btn ant-btn-primary" value="登 录" />
+  <Button type="primary">登录</Button>
 </form>
 , document.getElementById('components-form-demo-inline-form'));
 ````

components/input-number/demo/disabled.md

@@ -8,6 +8,7 @@
 
 ````jsx
 var InputNumber = antd.InputNumber;
+var Button = antd.Button;
 
 var Test = React.createClass({
   getInitialState() {
@@ -24,7 +25,7 @@ var Test = React.createClass({
     return <div>
       <InputNumber min={1} max={10} disabled={this.state.disabled} defaultValue={3} />
       <div style={{marginTop: 20}}>
-        <button onClick={this.toggle} className="ant-btn ant-btn-primary">Toggle disabled</button>
+        <Button onClick={this.toggle} type="primary">Toggle disabled</Button>
       </div>
     </div>;
   }

components/message/demo/duration.md

@@ -7,13 +7,14 @@
 ---
 
 ````jsx
+var Button = antd.Button;
 
 var message = antd.message;
 var success = function() {
   message.success('这是一条成功的提示,并将于10秒后消失', 10);
 };
 
-React.render(<button className="ant-btn ant-btn-primary" onClick={success}>自定义时长提示</button>
+React.render(<Button type="primary" onClick={success}>自定义时长提示</Button>
 , document.getElementById('components-message-demo-duration'));
 ````
 

components/message/demo/error.md

@@ -7,12 +7,13 @@
 ---
 
 ````jsx
+var Button = antd.Button;
 
 var message = antd.message;
 var error = function() {
   message.error('这是一条失败的提示这是一条失败的提示这是一条失败的提示');
 };
 
-React.render(<button className="ant-btn ant-btn-primary" onClick={error}>显示失败提示</button>
+React.render(<Button type="primary" onClick={error}>显示失败提示</Button>
 , document.getElementById('components-message-demo-error'));
 ````

components/message/demo/info.md

@@ -7,12 +7,13 @@
 ---
 
 ````jsx
+var Button = antd.Button;
 
 var message = antd.message;
 var info = function() {
   message.info('这是一条普通的提醒');
 };
 
-React.render(<button className="ant-btn ant-btn-primary" onClick={info}>显示普通提醒</button>
+React.render(<Button type="primary" onClick={info}>显示普通提醒</Button>
 , document.getElementById('components-message-demo-info'));
 ````

components/message/demo/loading.md

@@ -7,14 +7,15 @@
 ---
 
 ````jsx
-var message = antd.message;
+var Button = antd.Button;
 
+var message = antd.message;
 var success = function() {
   var hide = message.loading('正在执行中...', 0);
   // 异步手动移除
   setTimeout(hide, 2500);
 };
 
-React.render(<button className="ant-btn" onClick={success}>显示加载中...</button>
+React.render(<Button onClick={success}>显示加载中...</Button>
 , document.getElementById('components-message-demo-loading'));
 ````

components/message/demo/success.md

@@ -7,13 +7,14 @@
 ---
 
 ````jsx
-var message = antd.message;
+var Button = antd.Button;
 
+var message = antd.message;
 var success = function() {
   message.success('这是一条成功的提示');
 };
 
-React.render(<button className="ant-btn ant-btn-primary" onClick={success}>显示成功提示</button>
+React.render(<Button type="primary" onClick={success}>显示成功提示</Button>
 , document.getElementById('components-message-demo-success'));
 ````
 

components/modal/confirm.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import Dialog from './index';
 import Icon from '../iconfont';
+import {Button} from '../button';
 
 export default function (props) {
   let div = document.createElement('div');
@@ -71,18 +72,18 @@ export default function (props) {
     <div className="ant-confirm-content">{props.content}</div>
   </div>;
   let footer = <div className="ant-confirm-btns">
-    <button type="button" className="ant-btn-default ant-btn ant-btn-lg" onClick={onCancel}>取 消</button>
+    <Button size="lg" onClick={onCancel}>取 消</Button>
-    <button type="button" className="ant-btn-primary ant-btn ant-btn-lg" onClick={onOk}>确 定</button>
+    <Button type="primary" size="lg" onClick={onOk}>确 定</Button>
   </div>;
 
   if (props.okCancel) {
     footer = <div className="ant-confirm-btns">
-      <button type="button" className="ant-btn-default ant-btn ant-btn-lg" onClick={onCancel}>取 消</button>
+      <Button size="lg" onClick={onCancel}>取 消</Button>
-      <button type="button" className="ant-btn-primary ant-btn ant-btn-lg" onClick={onOk}>确 定</button>
+      <Button type="primary" size="lg" onClick={onOk}>确 定</Button>
     </div>;
   } else {
     footer = <div className="ant-confirm-btns">
-      <button type="button" className="ant-btn-primary ant-btn ant-btn-lg" onClick={onOk}>知道了</button>
+      <Button type="primary" size="lg" onClick={onOk}>知道了</Button>
     </div>;
   }
 

components/modal/demo/basic.md

@@ -8,6 +8,7 @@
 
 ````jsx
 var Modal = antd.Modal;
+var Button = antd.Button;
 
 var App = React.createClass({
   getInitialState() {
@@ -32,7 +33,7 @@ var App = React.createClass({
   },
   render() {
     return <div>
-      <button className="ant-btn ant-btn-primary" onClick={this.showModal}>显示对话框</button>
+      <Button type="primary" onClick={this.showModal}>显示对话框</Button>
       <Modal title="第一个 Modal" visible={this.state.visible}
         confirmLoading={this.state.confirmLoading} onOk={this.handleOk} onCancel={this.handleCancel}>
         <p>对话框的内容</p>

components/modal/demo/confirm-promise.md

@@ -8,6 +8,7 @@
 
 ````jsx
 var confirm = antd.Modal.confirm;
+var Button = antd.Button;
 
 function showConfirm(){
   confirm({
@@ -24,7 +25,7 @@ function showConfirm(){
 }
 
 React.render(
-<button className="ant-btn" onClick={showConfirm}>
+<Button onClick={showConfirm}>
   确认对话框
-</button>, document.getElementById('components-modal-demo-confirm-promise'));
+</Button>, document.getElementById('components-modal-demo-confirm-promise'));
 ````

components/modal/demo/confirm.md

@@ -8,6 +8,7 @@
 
 ````jsx
 var confirm = antd.Modal.confirm;
+var Button = antd.Button;
 
 function showConfirm(){
   confirm({
@@ -21,7 +22,7 @@ function showConfirm(){
 }
 
 React.render(
-<button className="ant-btn" onClick={showConfirm}>
+<Button onClick={showConfirm}>
   确认对话框
-</button>, document.getElementById('components-modal-demo-confirm'));
+</Button>, document.getElementById('components-modal-demo-confirm'));
 ````

components/modal/demo/custom.md

@@ -8,6 +8,8 @@
 
 ````jsx
 var Modal = antd.Modal;
+var Button = antd.Button;
+
 var ModalText = '对话框的内容';
 
 var Test = React.createClass({
@@ -40,7 +42,7 @@ var Test = React.createClass({
   },
   render() {
     return <div>
-      <button className="ant-btn ant-btn-primary" onClick={this.showModal}>显示对话框</button>
+      <Button type="primary" onClick={this.showModal}>显示对话框</Button>
       <Modal title="对话框标题"
         visible={this.state.visible}
         onOk={this.handleOk}

components/modal/demo/footer.md

@@ -8,6 +8,7 @@
 
 ````jsx
 var Modal = antd.Modal;
+var Button = antd.Button;
 
 var Test = React.createClass({
   getInitialState: function() {
@@ -32,17 +33,17 @@ var Test = React.createClass({
   },
   render() {
     return <div>
-      <button className="ant-btn ant-btn-primary" onClick={this.showModal}>
+      <Button type="primary" onClick={this.showModal}>
         显示对话框
-      </button>
+      </Button>
       <Modal ref="modal"
        visible={this.state.visible}
        title="对话框标题" onOk={this.handleOk} onCancel={this.handleCancel}
         footer={[
-          <button key="back" className="ant-btn ant-btn-lg" onClick={this.handleCancel}>返 回</button>,
+          <Button key="back" size="lg" onClick={this.handleCancel}>返 回</Button>,
-          <button key="submit" className={'ant-btn ant-btn-primary ant-btn-lg ' + (this.state.loading?'ant-btn-loading':'')} onClick={this.handleOk}>
+          <Button key="submit" type="primary" size="lg" loading={this.state.loading} onClick={this.handleOk}>
             提 交
-          </button>
+          </Button>
         ]}>
         <p>对话框的内容</p>
         <p>对话框的内容</p>

components/modal/demo/info.md

@@ -8,6 +8,7 @@
 
 ````jsx
 var Modal = antd.Modal;
+var Button = antd.Button;
 
 function info() {
   Modal.info({
@@ -37,9 +38,9 @@ function error() {
 }
 
 React.render(<div>
-  <button className="ant-btn" onClick={info}>信息提示</button>
+  <Button onClick={info}>信息提示</Button>
-  <button className="ant-btn" onClick={success}>成功提示</button>
+  <Button onClick={success}>成功提示</Button>
-  <button className="ant-btn" onClick={error}>失败提示</button>
+  <Button onClick={error}>失败提示</Button>
 </div>, document.getElementById('components-modal-demo-info'));
 ````
 

components/modal/index.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 import Dialog from 'rc-dialog';
 import { Dom } from 'rc-util';
 import confirm from './confirm';
+import { Button } from '../button';
 
 function noop() {
 }
@@ -73,16 +74,16 @@ let AntModal = React.createClass({
   },
 
   render() {
-    let loadingClass = this.state.confirmLoading ? ' ant-btn-loading' : '';
     let props = this.props;
     let defaultFooter = [
-      <button key="cancel" type="button" className="ant-btn ant-btn-lg" onClick={this.handleCancel}>取 消</button>,
+      <Button key="cancel" size="lg" onClick={this.handleCancel}>取 消</Button>,
-      <button key="confirm"
+      <Button key="confirm"
-        type="button"
+        type="primary"
-        className={'ant-btn ant-btn-primary ant-btn-lg' + loadingClass}
+        size="lg"
+        loading={this.state.confirmLoading}
         onClick={this.handleOk}>
         确 定
-      </button>
+      </Button>
     ];
     let footer = props.footer || defaultFooter;
     let visible = this.state.visible;

components/notification/demo/basic.md

@@ -8,6 +8,7 @@
 
 ````jsx
 var notification = antd.Notification;
+var Button = antd.Button;
 
 var openNotification = function() {
   notification.open({
@@ -18,7 +19,7 @@ var openNotification = function() {
 
 React.render(
   <div>
-    <button className='ant-btn ant-btn-primary' onClick={openNotification}>打开通知提醒框</button>
+    <Button type="primary" onClick={openNotification}>打开通知提醒框</Button>
   </div>,
 document.getElementById('components-notification-demo-basic'));
 ````

components/notification/demo/duration.md

@@ -8,6 +8,7 @@
 
 ````jsx
 var notification = antd.Notification;
+var Button = antd.Button;
 
 var openNotification = function() {
   var args = {
@@ -19,6 +20,6 @@ var openNotification = function() {
 };
 
 React.render(
-  <button className='ant-btn ant-btn-primary' onClick={openNotification}>打开通知提醒框</button>
+  <Button type="primary" onClick={openNotification}>打开通知提醒框</Button>
 , document.getElementById('components-notification-demo-duration'));
 ````

components/notification/demo/onclose.md

@@ -8,6 +8,7 @@
 
 ````jsx
 var notification = antd.Notification;
+var Button = antd.Button;
 
 var close = function() {
   console.log("我被默认的关闭按钮关闭了！");
@@ -24,7 +25,7 @@ var openNotification = function() {
 
 React.render(
   <div>
-    <button className='ant-btn ant-btn-primary' onClick={openNotification}>打开通知提醒框</button>
+    <Button type="primary" onClick={openNotification}>打开通知提醒框</Button>
   </div>,
 document.getElementById('components-notification-demo-onclose'));
 ````

components/notification/demo/with-btn.md

@@ -8,6 +8,7 @@
 
 ````jsx
 var notification = antd.Notification;
+var Button = antd.Button;
 
 var close = function(){
   console.log('我被默认的关闭按钮关闭了！');
@@ -19,9 +20,9 @@ var openNotification = function() {
     // 隐藏提醒框
     notification.close(key);
   };
-  var btn = <button className="ant-btn ant-btn-primary ant-btn-sm" onClick={btnClick}>
+  var btn = <Button type="primary" size="sm" onClick={btnClick}>
     自定义关闭按钮并触发回调函数
-  </button>;
+  </Button>;
   notification.open({
     message: "这是标题",
     description: "这是提示框的文案这是提示框示框的文案这是提示是提示框的文案这是提示框的文案",
@@ -33,7 +34,7 @@ var openNotification = function() {
 
 React.render(
   <div>
-    <button className="ant-btn ant-btn-primary" onClick={openNotification}>打开通知提醒框</button>
+    <Button type="primary" onClick={openNotification}>打开通知提醒框</Button>
   </div>,
 document.getElementById('components-notification-demo-with-btn'));
 ````

components/notification/demo/with-icon.md

@@ -8,6 +8,7 @@
 
 ````jsx
 var notification = antd.Notification;
+var Button = antd.Button;
 
 var openNotificationWithIcon = function(type) {
   return function(){
@@ -19,10 +20,10 @@ var openNotificationWithIcon = function(type) {
 };
 
 React.render(<div>
-  <button className="ant-btn" onClick={openNotificationWithIcon('success')}>成功</button>
+  <Button onClick={openNotificationWithIcon('success')}>成功</Button>
-  <button className="ant-btn" onClick={openNotificationWithIcon('info')}>消息</button>
+  <Button onClick={openNotificationWithIcon('info')}>消息</Button>
-  <button className="ant-btn" onClick={openNotificationWithIcon('warn')}>警告</button>
+  <Button onClick={openNotificationWithIcon('warn')}>警告</Button>
-  <button className="ant-btn" onClick={openNotificationWithIcon('error')}>错误</button>
+  <Button onClick={openNotificationWithIcon('error')}>错误</Button>
   </div>
 , document.getElementById('components-notification-demo-with-icon'));
 ````

components/popconfirm/index.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import Tooltip from 'rc-tooltip';
 import Icon from '../iconfont';
+import { Button } from '../button';
 const prefixCls = 'ant-popover';
 
 export default React.createClass({
@@ -47,8 +48,8 @@ export default React.createClass({
         </p>
 
         <div className={prefixCls + '-buttons'}>
-          <button onClick={this.cancel} className="ant-btn ant-btn-sm">取 消</button>
+          <Button onClick={this.cancel} size="sm">取 消</Button>
-          <button onClick={this.confirm} className="ant-btn ant-btn-primary ant-btn-sm">确 定</button>
+          <Button onClick={this.confirm} type="primary" size="sm">确 定</Button>
         </div>
       </div>
     </div>;

components/popover/demo/basic.md

@@ -8,6 +8,8 @@
 
 ````jsx
 var Popover = antd.Popover;
+var Button = antd.Button;
+
 var content = <div>
   <p>内容</p>
   <p>内容</p>
@@ -15,7 +17,7 @@ var content = <div>
 
 React.render(
   <Popover overlay={content} title="标题">
-    <button className="ant-btn ant-btn-primary">弹出卡片</button>
+    <Button type="primary">弹出卡片</Button>
   </Popover>
 , document.getElementById('components-popover-demo-basic'));
 ````

components/popover/demo/placement.md

@@ -8,6 +8,8 @@
 
 ````jsx
 var Popover = antd.Popover;
+var Button = antd.Button;
+
 var text = <span>标题</span>;
 var content = <div>
   <p>内容</p>
@@ -16,16 +18,16 @@ var content = <div>
 
 React.render(<div>
   <Popover placement="left" title={text} overlay={content}>
-    <button className="ant-btn">左</button>
+    <Button>左</Button>
   </Popover>
   <Popover placement="top" title={text} overlay={content}>
-    <button className="ant-btn">上</button>
+    <Button>上</Button>
   </Popover>
   <Popover placement="bottom" title={text} overlay={content}>
-    <button className="ant-btn">下</button>
+    <Button>下</Button>
   </Popover>
   <Popover placement="right" title={text} overlay={content}>
-    <button className="ant-btn">右</button>
+    <Button>右</Button>
   </Popover>
 </div>, document.getElementById('components-popover-demo-placement'));
 ````

components/popover/demo/triggerType.md

@@ -8,6 +8,8 @@
 
 ````jsx
 var Popover = antd.Popover;
+var Button = antd.Button;
+
 var content = <div>
   <p>内容</p>
   <p>内容</p>
@@ -15,13 +17,13 @@ var content = <div>
 
 React.render(<div>
   <Popover overlay={content} title="标题" trigger="hover">
-    <button className="ant-btn">移入</button>
+    <Button>移入</Button>
   </Popover>
   <Popover overlay={content} title="标题" trigger="focus">
-    <a href="javascript:;" className="ant-btn">聚焦</a>
+    <Button>聚焦</Button>
   </Popover>
   <Popover overlay={content} title="标题" trigger="click">
-    <button className="ant-btn">点击</button>
+    <Button>点击</Button>
   </Popover>
 </div>, document.getElementById('components-popover-demo-triggertype'));
 ````

components/progress/demo/circle-dynamic.md

@@ -8,6 +8,8 @@
 
 ````jsx
 var ProgressCircle = antd.Progress.Circle;
+var Button = antd.Button;
+var ButtonGroup = antd.ButtonGroup;
 var Icon = antd.Icon;
 
 var MyProgress = React.createClass({
@@ -33,14 +35,14 @@ var MyProgress = React.createClass({
   render() {
     return <div>
       <ProgressCircle percent={this.state.percent} />
-      <div className="ant-btn-group">
+      <ButtonGroup>
-        <button className="ant-btn ant-btn-ghost" onClick={this.decline}>
+        <Button type="ghost" onClick={this.decline}>
           <Icon type="minus" />
-        </button>
+        </Button>
-        <button className="ant-btn ant-btn-ghost" onClick={this.increase}>
+        <Button type="ghost" onClick={this.increase}>
           <Icon type="plus" />
-        </button>
+        </Button>
-      </div>
+      </ButtonGroup>
     </div>;
   }
 });

components/progress/demo/dynamic.md

@@ -8,6 +8,8 @@
 
 ````jsx
 var Progress = antd.Progress.Line;
+var Button = antd.Button;
+var ButtonGroup = antd.ButtonGroup;
 var Icon = antd.Icon;
 
 var MyProgress = React.createClass({
@@ -33,14 +35,14 @@ var MyProgress = React.createClass({
   render() {
     return <div>
       <Progress percent={this.state.percent} />
-      <div className="ant-btn-group">
+      <ButtonGroup>
-        <button className="ant-btn ant-btn-ghost" onClick={this.decline}>
+        <Button type="ghost" onClick={this.decline}>
           <Icon type="minus" />
-        </button>
+        </Button>
-        <button className="ant-btn ant-btn-ghost" onClick={this.increase}>
+        <Button type="ghost" onClick={this.increase}>
           <Icon type="plus" />
-        </button>
+        </Button>
-      </div>
+      </ButtonGroup>
     </div>;
   }
 });

components/radio/demo/disable.md

@@ -8,6 +8,7 @@ Radio 不可用。
 
 ````jsx
 var Radio = antd.Radio;
+var Button = antd.Button;
 
 function toggleDisabled() {
   disabled = !disabled;
@@ -30,9 +31,9 @@ var App = React.createClass({
       <br />
       <Radio defaultChecked={true} disabled={this.state.disabled}>不可用</Radio>
       <div style={{marginTop: 20}}>
-        <button className="ant-btn ant-btn-primary" onClick={this.toggleDisabled}>
+        <Button type="primary" onClick={this.toggleDisabled}>
           Toggle disabled
-        </button>
+        </Button>
       </div>
     </div>;
   }

components/steps/demo/step-next.md

@@ -15,6 +15,7 @@
 ````jsx
 var Steps = antd.Steps;
 var Step = Steps.Step;
+var Button = antd.Button;
 var container = document.getElementById('components-steps-demo-step-next');
 var array = Array.apply(null, Array(Math.floor(Math.random() * 3) + 3));
 var steps = array.map(function(item, i) {
@@ -47,7 +48,7 @@ var App = React.createClass({
           {steps.map((s, i) => <Step key={i} title={s.title} description={s.description} />)}
         </Steps>
         <div>
-          <button className='ant-btn' onClick={this.next}>下一步</button>
+          <Button onClick={this.next}>下一步</Button>
         </div>
       </div>
     );

components/switch/demo/disabled.md

@@ -8,6 +8,7 @@ Switch 失效状态。
 
 ````jsx
 var Switch = antd.Switch;
+var Button = antd.Button;
 var container = document.getElementById('components-switch-demo-disabled');
 
 var Test = React.createClass({
@@ -26,7 +27,7 @@ var Test = React.createClass({
       <Switch disabled={this.state.disabled} />
       <br />
       <br />
-      <button className="ant-btn ant-btn-primary" onClick={this.toggle}>Toggle disabled</button>
+      <Button type="primary" onClick={this.toggle}>Toggle disabled</Button>
     </div>;
   }
 });

components/table/demo/ajax.md

@@ -10,6 +10,7 @@
 
 ````jsx
 var Table = antd.Table;
+var Button = antd.Button;
 
 var columns = [{
   title: '姓名',
@@ -85,13 +86,13 @@ var Test = React.createClass({
   render() {
     return <div>
       <Table columns={columns} dataSource={this.state.dataSource} />
-      <button className="ant-btn ant-btn-primary" onClick={this.refresh}>
+      <Button type="primary" onClick={this.refresh}>
         重新加载数据
-      </button>
+      </Button>
       &nbsp;
-      <button className="ant-btn" onClick={this.changeAndRefresh}>
+      <Button onClick={this.changeAndRefresh}>
         加载 city=hz 的数据
-      </button>
+      </Button>
     </div>;
   }
 });

components/table/demo/local-data.md

@@ -8,6 +8,8 @@
 
 ````jsx
 var Table = antd.Table;
+var Button = antd.Button;
+
 var columns = [{
   title: '姓名',
   dataIndex: 'name',
@@ -73,9 +75,9 @@ var App = React.createClass({
   render() {
     return <div>
       <Table columns={columns} dataSource={this.state.data} />
-      <button className="ant-btn" onClick={this.handleClick1}>加载本地数据1</button>
+      <Button onClick={this.handleClick1}>加载本地数据1</Button>
       &nbsp;
-      <button className="ant-btn" onClick={this.handleClick2}>加载本地数据2</button>
+      <Button onClick={this.handleClick2}>加载本地数据2</Button>
     </div>;
   }
 })

components/upload/demo/basic.md

@@ -9,6 +9,7 @@
 ````jsx
 var Upload = antd.Upload;
 var message = antd.message;
+var Button = antd.Button;
 var Icon = antd.Icon;
 
 var props = {
@@ -28,9 +29,9 @@ var props = {
 
 React.render(
   <Upload {...props}>
-    <button type="button" className="ant-btn ant-btn-ghost">
+    <Button type="ghost">
       <Icon type="upload" /> 点击上传
-    </button>
+    </Button>
   </Upload>
 , document.getElementById('components-upload-demo-basic'));
 ````

components/upload/demo/defaultFileList.md

@@ -8,6 +8,7 @@
 
 ````jsx
 var Upload = antd.Upload;
+var Button = antd.Button;
 var Icon = antd.Icon;
 
 var props = {
@@ -33,9 +34,9 @@ var props = {
 
 React.render(
   <Upload {...props}>
-    <button type="button" className="ant-btn ant-btn-ghost">
+    <Button type="ghost">
       <Icon type="upload" /> 点击上传
-    </button>
+    </Button>
   </Upload>
 , document.getElementById('components-upload-demo-defaultfilelist'));
 ````

components/upload/demo/fileList.md

@@ -14,6 +14,7 @@
 
 ````jsx
 var Upload = antd.Upload;
+var Button = antd.Button;
 var Icon = antd.Icon;
 var fileList = [{
   uid: -1,
@@ -63,9 +64,9 @@ var MyUpload = React.createClass({
       multiple: true
     };
     return <Upload {...props} fileList={this.state.fileList}>
-      <button type="button" className="ant-btn ant-btn-ghost">
+      <Button type="ghost">
         <Icon type="upload" /> 点击上传
-      </button>
+      </Button>
     </Upload>;
   }
 });

components/upload/demo/multiple.md

@@ -9,6 +9,7 @@
 ````jsx
 var Upload = antd.Upload;
 var message = antd.message;
+var Button = antd.Button;
 var Icon = antd.Icon;
 
 var props = {
@@ -28,9 +29,9 @@ var props = {
 
 React.render(
   <Upload {...props}>
-    <button type="button" className="ant-btn ant-btn-ghost">
+    <Button type="ghost">
       <Icon type="upload" /> 点击上传
-    </button>
+    </Button>
   </Upload>
 , document.getElementById('components-upload-demo-multiple'));
 ````

components/validation/demo/basic.md

@@ -17,6 +17,7 @@ var Select = antd.Select;
 var Option = Select.Option;
 var Radio = antd.Radio;
 var RadioGroup = antd.Radio.Group;
+var Button = antd.Button;
 
 function cx(classNames) {
   if (typeof classNames === 'object') {
@@ -146,7 +147,7 @@ var Form = React.createClass({
     var status = this.state.status;
 
     return (
-      <form onSubmit={this.handleSubmit} className="ant-form-horizontal">
+      <form className="ant-form-horizontal">
         <Validation ref="validation" onValidate={this.handleValidate}>
           <div className="ant-form-item">
             <label className="col-7" htmlFor="name" required>用户名：</label>
@@ -249,9 +250,9 @@ var Form = React.createClass({
 
           <div className="ant-form-item">
             <div className="col-offset-7 col-12">
-              <button type="submit" className="ant-btn ant-btn-primary">确 定</button>
+              <Button type="primary" onClick={this.handleSubmit}>确 定</Button>
             &nbsp;&nbsp;&nbsp;
-              <a href="#" className="ant-btn" onClick={this.handleReset}>重 置</a>
+              <Button onClick={this.handleReset}>重 置</Button>
             </div>
           </div>
         </Validation>

components/validation/demo/customize.md

@@ -11,6 +11,7 @@
 ````jsx
 var Validation = antd.Validation;
 var Validator = Validation.Validator;
+var Button = antd.Button;
 
 function cx(classNames) {
   if (typeof classNames === 'object') {
@@ -150,7 +151,7 @@ var Form = React.createClass({
     var status = this.state.status;
 
     return (
-      <form onSubmit={this.handleSubmit} className="ant-form-horizontal">
+      <form className="ant-form-horizontal">
         <Validation ref="validation" onValidate={this.handleValidate}>
 
           <div className="ant-form-item">
@@ -189,9 +190,9 @@ var Form = React.createClass({
 
           <div className="ant-form-item">
             <div className="col-offset-6 col-12">
-              <button type="submit" className="ant-btn ant-btn-primary">确 定</button>
+              <Button type="primary" onClick={this.handleSubmit}>确 定</Button>
               &nbsp;&nbsp;&nbsp;
-              <a href="#" className="ant-btn" onClick={this.handleReset}>重 置</a>
+              <Button onClick={this.handleReset}>重 置</Button>
             </div>
           </div>
         </Validation>

style/components/button.less

@@ -72,12 +72,6 @@
     }
   }
 
-  &-menu {
-    > .@{iconfont-css-prefix} {
-      .iconfont-size-under-12px(10px);
-    }
-  }
-
   &-group {
     .btn-group(@btn-prefix-cls);
   }

style/components/dropdown.less

@@ -1,4 +1,5 @@
-@dropdown-prefix-cls: ant-dropdown;
+@import "../mixins/index";
+@dropdown-prefix-cls: ~"@{css-prefix}dropdown";
 
 .@{dropdown-prefix-cls} {
   position: absolute;
@@ -13,6 +14,11 @@
 
   &-wrap {
     position: relative;
+
+    .@{btn-prefix-cls} > .@{iconfont-css-prefix}-down {
+      .iconfont-size-under-12px(10px);
+    }
+
     .anticon-down:before {
       transition: transform 0.2s ease;
     }