diff --git a/packages/discuz-design/components/button/README.md b/packages/discuz-design/components/button/README.md
index 58a796310eea11f5c41ccf3c256cfc3e458b7650..6b6b0fdf864144067599ff29be55f24ec1880bd8 100644
--- a/packages/discuz-design/components/button/README.md
+++ b/packages/discuz-design/components/button/README.md
@@ -1,15 +1,25 @@
 # Button
 
 ## 组件说明
+常用的操作按钮。
 
 ## 示例
 
-### 示例
-[示例](./__examples__/example1.jsx)
+### WEB示例
+[基础用法](./__examples__/web/base.tsx)
+[禁用状态](./__examples__/web/disabled.tsx)
+[不同尺寸](./__examples__/web/size.tsx)
+[加载中](./__examples__/web/loading.tsx)
+[htmlType](./__examples__/web/htmlType.tsx)
 
-### 示例2
-[示例2](./__examples__/example2.jsx)
+### 小程序示例
+[基础用法](./__examples__/mini/base.tsx)
+[禁用状态](./__examples__/mini/disabled.tsx)
+[不同尺寸](./__examples__/mini/size.tsx)
+[加载中](./__examples__/mini/loading.tsx)
+[openType](./__examples__/mini/openType.tsx)
 
 ## API参数
+[API参数](./interface.ts)
 
 
diff --git a/packages/discuz-design/components/button/__examples__/mini/base.tsx b/packages/discuz-design/components/button/__examples__/mini/base.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..417d56e1751b8714b3df358d910b5cc4cef1d189
--- /dev/null
+++ b/packages/discuz-design/components/button/__examples__/mini/base.tsx
@@ -0,0 +1,18 @@
+import Button from '../../index';
+import React from 'react';
+
+export default function Base() {
+  const onClick = (e) => {
+    console.log('click', e);
+  };
+
+  return (
+    <>
+      <Button onClick={onClick}>默认按钮</Button>
+      <Button type="primary" onClick={onClick}>
+        主要按钮
+      </Button>
+      <Button type="dashed">虚线边框</Button>
+    </>
+  );
+}
diff --git a/packages/discuz-design/components/button/__examples__/mini/disabled.tsx b/packages/discuz-design/components/button/__examples__/mini/disabled.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..e20b32c958004e1b58156dcd85ac3c957a0d0c45
--- /dev/null
+++ b/packages/discuz-design/components/button/__examples__/mini/disabled.tsx
@@ -0,0 +1,16 @@
+import Button from '../../index';
+import React from 'react';
+
+export default function Disabled() {
+  return (
+    <>
+      <Button disabled={true}>默认按钮</Button>
+      <Button type="primary" disabled={true}>
+        主要按钮
+      </Button>
+      <Button type="dashed" disabled={true}>
+        虚线边框
+      </Button>
+    </>
+  );
+}
diff --git a/packages/discuz-design/components/button/__examples__/mini/example1.jsx b/packages/discuz-design/components/button/__examples__/mini/loading.tsx
similarity index 35%
rename from packages/discuz-design/components/button/__examples__/mini/example1.jsx
rename to packages/discuz-design/components/button/__examples__/mini/loading.tsx
index 04b84122c2a64585269a9abb2392fe9a36d75064..b353606497759c6dfb6625474e3f001dca01f7f5 100644
--- a/packages/discuz-design/components/button/__examples__/mini/example1.jsx
+++ b/packages/discuz-design/components/button/__examples__/mini/loading.tsx
@@ -1,6 +1,10 @@
 import Button from '../../index';
 import React from 'react';
 
-export default function Example1() {
-  return <Button />;
+export default function Loading() {
+  return (
+    <>
+      <Button loading={true}>加载中</Button>
+    </>
+  );
 }
diff --git a/packages/discuz-design/components/button/__examples__/mini/openType.tsx b/packages/discuz-design/components/button/__examples__/mini/openType.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..303cae80305306db1a2514babe3a1f65f73b6a04
--- /dev/null
+++ b/packages/discuz-design/components/button/__examples__/mini/openType.tsx
@@ -0,0 +1,22 @@
+import Button from '../../index';
+import React from 'react';
+
+export default function HtmlType() {
+  const onContact = (e) => {
+    console.log('onContact', e);
+  };
+
+  return (
+    <>
+      <Button type="primary" openType="contact" onContact={onContact} sendMessageTitle="自定义回话标题">
+        客服消息
+      </Button>
+      <Button type="primary" openType="getPhoneNumber">
+        获取手机号码
+      </Button>
+      <Button type="primary" openType="share">
+        分享
+      </Button>
+    </>
+  );
+}
diff --git a/packages/discuz-design/components/button/__examples__/mini/size.tsx b/packages/discuz-design/components/button/__examples__/mini/size.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..6797a903fd49708dc2bbb337308e53748217b650
--- /dev/null
+++ b/packages/discuz-design/components/button/__examples__/mini/size.tsx
@@ -0,0 +1,21 @@
+import Button from '../../index';
+import React from 'react';
+
+export default function Size() {
+  return (
+    <>
+      <Button type="primary" size="large">
+        大型按钮
+      </Button>
+      <Button type="primary" size="medium">
+        正常按钮
+      </Button>
+      <Button type="primary" size="small">
+        中小按钮
+      </Button>
+      <Button type="primary" size="mini">
+        小型按钮
+      </Button>
+    </>
+  );
+}
diff --git a/packages/discuz-design/components/button/__examples__/web/base.tsx b/packages/discuz-design/components/button/__examples__/web/base.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..417d56e1751b8714b3df358d910b5cc4cef1d189
--- /dev/null
+++ b/packages/discuz-design/components/button/__examples__/web/base.tsx
@@ -0,0 +1,18 @@
+import Button from '../../index';
+import React from 'react';
+
+export default function Base() {
+  const onClick = (e) => {
+    console.log('click', e);
+  };
+
+  return (
+    <>
+      <Button onClick={onClick}>默认按钮</Button>
+      <Button type="primary" onClick={onClick}>
+        主要按钮
+      </Button>
+      <Button type="dashed">虚线边框</Button>
+    </>
+  );
+}
diff --git a/packages/discuz-design/components/button/__examples__/web/disabled.tsx b/packages/discuz-design/components/button/__examples__/web/disabled.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..e20b32c958004e1b58156dcd85ac3c957a0d0c45
--- /dev/null
+++ b/packages/discuz-design/components/button/__examples__/web/disabled.tsx
@@ -0,0 +1,16 @@
+import Button from '../../index';
+import React from 'react';
+
+export default function Disabled() {
+  return (
+    <>
+      <Button disabled={true}>默认按钮</Button>
+      <Button type="primary" disabled={true}>
+        主要按钮
+      </Button>
+      <Button type="dashed" disabled={true}>
+        虚线边框
+      </Button>
+    </>
+  );
+}
diff --git a/packages/discuz-design/components/button/__examples__/web/htmlType.tsx b/packages/discuz-design/components/button/__examples__/web/htmlType.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..8d096daa3acad920911c08e9656b02db0a7b96c1
--- /dev/null
+++ b/packages/discuz-design/components/button/__examples__/web/htmlType.tsx
@@ -0,0 +1,10 @@
+import Button from '../../index';
+import React from 'react';
+
+export default function HtmlType() {
+  return (
+    <>
+      <Button htmlType="submit">submit</Button>
+    </>
+  );
+}
diff --git a/packages/discuz-design/components/button/__examples__/web/example1.tsx b/packages/discuz-design/components/button/__examples__/web/loading.tsx
similarity index 35%
rename from packages/discuz-design/components/button/__examples__/web/example1.tsx
rename to packages/discuz-design/components/button/__examples__/web/loading.tsx
index 04b84122c2a64585269a9abb2392fe9a36d75064..b353606497759c6dfb6625474e3f001dca01f7f5 100644
--- a/packages/discuz-design/components/button/__examples__/web/example1.tsx
+++ b/packages/discuz-design/components/button/__examples__/web/loading.tsx
@@ -1,6 +1,10 @@
 import Button from '../../index';
 import React from 'react';
 
-export default function Example1() {
-  return <Button />;
+export default function Loading() {
+  return (
+    <>
+      <Button loading={true}>加载中</Button>
+    </>
+  );
 }
diff --git a/packages/discuz-design/components/button/__examples__/web/size.tsx b/packages/discuz-design/components/button/__examples__/web/size.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..6797a903fd49708dc2bbb337308e53748217b650
--- /dev/null
+++ b/packages/discuz-design/components/button/__examples__/web/size.tsx
@@ -0,0 +1,21 @@
+import Button from '../../index';
+import React from 'react';
+
+export default function Size() {
+  return (
+    <>
+      <Button type="primary" size="large">
+        大型按钮
+      </Button>
+      <Button type="primary" size="medium">
+        正常按钮
+      </Button>
+      <Button type="primary" size="small">
+        中小按钮
+      </Button>
+      <Button type="primary" size="mini">
+        小型按钮
+      </Button>
+    </>
+  );
+}
diff --git a/packages/discuz-design/components/button/adapters/index.ts b/packages/discuz-design/components/button/adapters/index.ts
index 55de76647de1c7eb4873aea382fa29f5033ea83e..a7c86a585db11819c71ddc91ed329a026d6db621 100644
--- a/packages/discuz-design/components/button/adapters/index.ts
+++ b/packages/discuz-design/components/button/adapters/index.ts
@@ -1,9 +1,7 @@
 import { baseAdapterFactory } from '../../../extends/baseAdapter';
 
 export const ButtonLogicalAdapter = baseAdapterFactory({
-  defaultAdapter: {
-    haha: () => {},
-  },
+  defaultAdapter: {},
   adapterImplement() {
     if (process.env.DISCUZ_ENV === 'web') {
       return require('./web').ButtonWebAdapter;
diff --git a/packages/discuz-design/components/button/adapters/mini.ts b/packages/discuz-design/components/button/adapters/mini.ts
index 456697bd5bc0c9d14bfb752d2451c30cd01ea5f8..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 100644
--- a/packages/discuz-design/components/button/adapters/mini.ts
+++ b/packages/discuz-design/components/button/adapters/mini.ts
@@ -1,7 +0,0 @@
-export const ButtonMiniAdapter = {
-  haha() {
-    this.setState({
-      test: 345,
-    });
-  },
-};
diff --git a/packages/discuz-design/components/button/adapters/web.ts b/packages/discuz-design/components/button/adapters/web.ts
index 9c1d8c7050d7dd5f882ef8a083e7603bed2a1da4..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 100644
--- a/packages/discuz-design/components/button/adapters/web.ts
+++ b/packages/discuz-design/components/button/adapters/web.ts
@@ -1,5 +0,0 @@
-export const ButtonWebAdapter = {
-  haha() {
-    console.log(this.state);
-  },
-};
diff --git a/packages/discuz-design/components/button/index.tsx b/packages/discuz-design/components/button/index.tsx
index f081e21e344a6c864bf1ec32d3fac3cdde8a38a1..3f1e86d080d5f2acd96abe2cad252b6a02c104c9 100644
--- a/packages/discuz-design/components/button/index.tsx
+++ b/packages/discuz-design/components/button/index.tsx
@@ -1,48 +1,27 @@
-import React from "react";
-import { baseComponentFactory } from "../../extends/baseComponent";
-import { ButtonViewAdapter } from "./layouts/index";
-import { ButtonLogicalAdapter } from "./adapters/index";
+import React from 'react';
+import { baseComponentFactory } from '../../extends/baseComponent';
+import { ButtonViewAdapter } from './layouts/index';
+import { ButtonLogicalAdapter } from './adapters/index';
+import { MiniButtonProps, WebButtonProps } from './interface';
 
-interface ButtonProps {}
+interface ButtonProps extends MiniButtonProps, WebButtonProps {}
 
-interface ButtonState {
-  test: number;
-}
+interface ButtonState {}
 
-interface ButtonLayoutProps {
-  onClick: any;
-  content: any;
-}
+interface ButtonLayoutProps {}
 
-interface ButtonAdapter {
-  haha: any;
-  test: any;
-}
+interface ButtonAdapter {}
 
-export default class Button extends baseComponentFactory<
-  ButtonProps,
-  ButtonState,
-  ButtonLayoutProps,
-  ButtonAdapter
->({
+export default class Button extends baseComponentFactory<ButtonProps, ButtonState, ButtonLayoutProps, ButtonAdapter>({
   viewAdapter: ButtonViewAdapter,
   logicalAdapter: ButtonLogicalAdapter,
 }) {
-  constructor(props) {
-    super(props);
-    this.state = {
-      test: 23456,
+  render() {
+    const composeProps = {
+      ...this.props,
     };
-  }
-
-  handleClick = () => {
-    this.adapter.haha();
-  };
 
-  render() {
     const { RenderComponent } = this;
-    return (
-      <RenderComponent onClick={this.handleClick} content={this.state.test} />
-    );
+    return <RenderComponent {...composeProps}>{this.props.children}</RenderComponent>;
   }
 }
diff --git a/packages/discuz-design/components/button/interface.ts b/packages/discuz-design/components/button/interface.ts
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..8f7f855c83976c77d6afc0e5f359b1d54978b209 100644
--- a/packages/discuz-design/components/button/interface.ts
+++ b/packages/discuz-design/components/button/interface.ts
@@ -0,0 +1,101 @@
+import { StyledProps } from 'utils/_type/StyledProps';
+
+/**
+ * 基本的按钮属性
+ */
+export interface BaseButtonProps extends StyledProps {
+  /**
+   * 按钮类型
+   *
+   *   - `large` 大尺寸
+   *   - `medium` 中尺寸
+   *   - `small` 中小尺寸
+   *   - `mini` 小尺寸
+   *
+   * @default "medium"
+   */
+  size?: 'large' | 'medium' | 'small' | 'mini';
+
+  /**
+   * 按钮类型
+   *
+   *   - `primary` 蓝色主要按钮
+   *   - `dashed` 虚线按钮
+   *   -  默认白色按钮
+   *
+   * @default
+   */
+  type?: 'primary' | 'dashed';
+
+  /**
+   * 设置按钮为禁用状态
+   *
+   * 禁用状态下，不会响应 `onClick` 回调
+   * */
+  disabled?: boolean;
+
+  /**
+   * 设置按钮为加载状态
+   */
+  loading?: boolean;
+
+  /**
+   * 点击回调函数
+   */
+  onClick?: (event) => void;
+}
+
+/**
+ * 小程序端专有属性
+ * 参考微信小程序文档 https://developers.weixin.qq.com/miniprogram/dev/component/button.html
+ */
+export interface MiniButtonProps extends BaseButtonProps {
+  openType?:
+    | 'contact'
+    | 'contactShare'
+    | 'share'
+    | 'getRealnameAuthInfo'
+    | 'getAuthorize'
+    | 'getPhoneNumber'
+    | 'getUserInfo'
+    | 'lifestyle'
+    | 'launchApp'
+    | 'openSetting'
+    | 'feedback';
+
+  onGetUserInfo?: (event) => void;
+
+  onContact?: (event) => void;
+
+  onGetPhoneNumber?: (event) => void;
+
+  onError?: (event) => void;
+
+  onOpenSetting?: (event) => void;
+
+  formType?: 'submit' | 'reset';
+
+  // lang?: 'zh_CN' | 'zh_TW' | 'en';
+
+  sessionFrom?: string;
+
+  sendMessageTitle?: string;
+
+  sendMessagePath?: string;
+
+  sendMessageImg?: string;
+
+  showMessageCard?: boolean;
+
+  appParameter?: string;
+}
+
+/**
+ * web端专有属性
+ */
+export interface WebButtonProps extends BaseButtonProps {
+  /**
+   * 原生 `<button>` 标签的 `type` 属性
+   */
+  htmlType?: 'button' | 'submit' | 'reset';
+}
diff --git a/packages/discuz-design/components/button/layouts/mini.tsx b/packages/discuz-design/components/button/layouts/mini.tsx
index 50252c8f01c8aaf86c4831bf227ef43dd60fd4e6..ccdabf17662c7efa98cd2a29224dbe3df932c4fb 100644
--- a/packages/discuz-design/components/button/layouts/mini.tsx
+++ b/packages/discuz-design/components/button/layouts/mini.tsx
@@ -1,16 +1,94 @@
-import { View } from '@tarojs/components';
+import { View, Button } from '@tarojs/components';
 import React, { Component } from 'react';
+import { ConfigContext } from '../../../extends/configContext';
+import classNameFn from 'classnames';
+import { MiniButtonProps } from '../interface';
+
+export class ButtonMiniLayout extends Component<MiniButtonProps> {
+  static contextType = ConfigContext;
+
+  onClick(event): void {
+    if (!this.props.loading || this.props.disabled) {
+      this.props.onClick && this.props.onClick(event);
+    }
+  }
+
+  onGetUserInfo(event): void {
+    this.props.onGetUserInfo && this.props.onGetUserInfo(event);
+  }
+
+  onContact(event): void {
+    this.props.onContact && this.props.onContact(event);
+  }
+
+  onGetPhoneNumber(event): void {
+    this.props.onGetPhoneNumber && this.props.onGetPhoneNumber(event);
+  }
+
+  onError(event): void {
+    this.props.onError && this.props.onError(event);
+  }
+
+  onOpenSetting(event): void {
+    this.props.onOpenSetting && this.props.onOpenSetting(event);
+  }
 
-export class ButtonMiniLayout extends Component<{
-  onClick: any,
-  content: any
-}> {
   render() {
-    const { onClick = () => {}, content = null } = this.props;
+    const {
+      size = 'medium',
+      type,
+      disabled,
+      loading,
+      style,
+      className,
+      formType,
+      openType,
+      // lang,
+      sessionFrom,
+      sendMessageTitle,
+      sendMessagePath,
+      sendMessageImg,
+      showMessageCard,
+      appParameter,
+    }: MiniButtonProps = this.props;
+
+    const { clsPrefix } = this.context;
+    const componentPrefix = `${clsPrefix}-button`;
+
+    const classNames: string = classNameFn(
+      componentPrefix,
+      className,
+      size && `${componentPrefix}--${size}`,
+      type && `${componentPrefix}--${type}`,
+      {
+        'is-loading': loading,
+        'is-disabled': disabled,
+      },
+    );
+
     return (
-      <View className="dzq" onClick={onClick}>
-        {content}
-      </View>
+      <Button
+        style={style}
+        className={classNames}
+        openType={openType}
+        // lang={lang}
+        formType={formType}
+        sessionFrom={sessionFrom}
+        sendMessageTitle={sendMessageTitle}
+        sendMessagePath={sendMessagePath}
+        sendMessageImg={sendMessageImg}
+        showMessageCard={showMessageCard}
+        appParameter={appParameter}
+        onClick={this.onClick.bind(this)}
+        onGetUserInfo={this.onGetUserInfo.bind(this)}
+        onGetPhoneNumber={this.onGetPhoneNumber.bind(this)}
+        onOpenSetting={this.onOpenSetting.bind(this)}
+        onError={this.onError.bind(this)}
+        onContact={this.onContact.bind(this)}
+      >
+        {loading && <View className={`${clsPrefix}-icon-success`}></View>}
+        {this.props.children}
+      </Button>
     );
   }
 }
diff --git a/packages/discuz-design/components/button/layouts/web.tsx b/packages/discuz-design/components/button/layouts/web.tsx
index 97ab80fd25bfebd068830b75b4028ee583e714e5..e00c3f0281bd073f5a0b6f4cb8b29b9c8211daff 100644
--- a/packages/discuz-design/components/button/layouts/web.tsx
+++ b/packages/discuz-design/components/button/layouts/web.tsx
@@ -1,13 +1,39 @@
 import React, { Component } from 'react';
-import BaseComponent from '../../../extends/baseComponent';
+import { ConfigContext } from '../../../extends/configContext';
+import classNames from 'classnames';
+import { WebButtonProps } from '../interface';
+
+export class ButtonWebLayout extends Component<WebButtonProps> {
+  static contextType = ConfigContext;
+
+  onClick(e): void {
+    if (!this.props.loading || this.props.disabled) {
+      this.props.onClick && this.props.onClick(e);
+    }
+  }
 
-export class ButtonWebLayout extends Component {
   render() {
-    const { onClick } = this.props;
-    const { clsPrefix } = BaseComponent;
+    const { size = 'medium', type, htmlType, disabled, loading, style, className }: WebButtonProps = this.props;
+
+    const { clsPrefix } = this.context;
+
+    const componentPrefix = `${clsPrefix}-button`;
+
+    const classNameStr: string = classNames(
+      componentPrefix,
+      className,
+      size && `${componentPrefix}--${size}`,
+      type && `${componentPrefix}--${type}`,
+      {
+        'is-loading': loading,
+        'is-disabled': disabled,
+      },
+    );
+
     return (
-      <button className={clsPrefix} onClick={onClick}>
-        123
+      <button style={style} className={classNameStr} type={htmlType} onClick={this.onClick.bind(this)}>
+        {loading && <i className={`${clsPrefix}-icon-success`} />}
+        {this.props.children}
       </button>
     );
   }
diff --git a/packages/discuz-design/components/button/styles/index.scss b/packages/discuz-design/components/button/styles/index.scss
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..fc260ab92df280ef7896add403ed1d67f0f17746 100644
--- a/packages/discuz-design/components/button/styles/index.scss
+++ b/packages/discuz-design/components/button/styles/index.scss
@@ -0,0 +1,175 @@
+@import "../../../styles/mixin.scss";
+@import "./var.scss";
+@import "./mixin.scss";
+
+
+@keyframes rotating {
+  0% {
+    transform: rotateZ(0deg);
+  }
+  100% {
+    transform: rotateZ(360deg);
+  }
+}
+
+@include b(button) {
+  display: inline-block;
+  line-height: 1;
+  white-space: nowrap;
+  cursor: pointer;
+  background: $button-default-background-color;
+  border: $button-border-base;
+  border-color: $button-default-border-color;
+  border-radius: $button-border-radius;
+  color: $button-default-font-color;
+  -webkit-appearance: none;
+  text-align: center;
+  box-sizing: border-box;
+  outline: none;
+  margin: 0;
+  transition: 0.1s;
+  font-weight: $button-font-weight;
+  @include utils-user-select(none);
+  & + & {
+    margin-left: 10px;
+  }
+
+  [class*=dzq-icon-] {
+    display: inline-block;
+    margin-right: 5px;
+  }
+
+  &::after {
+    content: none;
+  }
+
+  &:hover,
+  &:focus {
+    color: $color-white;
+    background-color: $button-primary-background-color;
+  }
+
+  @include when(loading) {
+    position: relative;
+    pointer-events: none;
+
+    &:before {
+      pointer-events: none;
+      content: '';
+      position: absolute;
+      left: -1px;
+      top: -1px;
+      right: -1px;
+      bottom: -1px;
+      border-radius: inherit;
+      background-color: rgba(255,255,255,.35);
+    }
+
+    .#{$namespace}-icon-success {
+      animation: rotating 2s linear infinite;
+    }
+  }
+
+  @include when(disabled) {
+    &,
+    &:hover,
+    &:focus {
+      color: $button-default-color-disabled;
+      cursor: not-allowed;
+      background-image: none;
+      background-color: $button-default-background-color-disabled;
+      border-color: $button-default-border-color-disabled;
+    }
+
+    &.el-button--text {
+      background-color: transparent;
+    }
+  }
+
+  @include m(large) {
+    @include button-size(
+      $button-large-padding-vertical,
+      $button-large-padding-horizontal,
+      $button-large-font-size,
+      $button-large-border-radius
+    );
+  }
+
+  @include m(medium) {
+    @include button-size(
+      $button-medium-padding-vertical,
+      $button-medium-padding-horizontal,
+      $button-medium-font-size,
+      $button-medium-border-radius
+    );
+  }
+
+  @include m(small) {
+    @include button-size(
+      $button-small-padding-vertical,
+      $button-small-padding-horizontal,
+      $button-small-font-size,
+      $button-small-border-radius
+    );
+  }
+
+  @include m(mini) {
+    @include button-size(
+      $button-mini-padding-vertical,
+      $button-mini-padding-horizontal,
+      $button-mini-font-size,
+      $button-mini-border-radius
+    );
+  }
+
+  @include m(primary) {
+    color: $color-white;
+    background-color: $button-primary-background-color;
+
+    &:hover,
+    &:focus {
+      background: $button-primary-background-color-hover;
+      border-color: $button-primary-background-color-hover;
+    }
+
+    @include when(disabled) {
+      &,
+      &:hover,
+      &:focus {
+        color: $color-white;
+        cursor: not-allowed;
+        background-image: none;
+        background-color: $button-primary-background-color-disabled-hover;
+        border-color: $button-primary-background-color-disabled-hover;
+      }
+
+      &.el-button--text {
+        background-color: transparent;
+      }
+    }
+  }
+
+  @include m(dashed) {
+    color: $button-default-font-color;
+    background-color: $color-white;
+    border: $button-border-dashed;
+
+    &:hover,
+    &:focus {
+      background: $button-default-background-color;
+      color: $button-default-font-color;
+    }
+
+    @include when(disabled) {
+      &,
+      &:hover,
+      &:focus {
+        color: $button-default-color-disabled;
+        cursor: not-allowed;
+        background-image: none;
+        background-color: $button-default-background-color-disabled;
+        border-color: $button-default-border-color-disabled;
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/packages/discuz-design/components/button/styles/mixin.scss b/packages/discuz-design/components/button/styles/mixin.scss
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..30a6422639e16550669d3f4e98a600d8ea96e1c1 100644
--- a/packages/discuz-design/components/button/styles/mixin.scss
+++ b/packages/discuz-design/components/button/styles/mixin.scss
@@ -0,0 +1,150 @@
+@mixin utils-user-select($value) {
+  -moz-user-select: $value;
+  -webkit-user-select: $value;
+  -ms-user-select: $value;
+}
+
+@mixin utils-clearfix {
+  $selector: &;
+
+  @at-root {
+    #{$selector}::before,
+    #{$selector}::after {
+      display: table;
+      content: "";
+    }
+    #{$selector}::after {
+      clear: both;
+    }
+  }
+}
+
+@mixin utils-vertical-center {
+  $selector: &;
+
+  @at-root {
+    #{$selector}::after {
+      display: inline-block;
+      content: "";
+      height: 100%;
+      vertical-align: middle;
+    }
+  }
+}
+
+@mixin utils-ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+@mixin button-size(
+  $padding-vertical,
+  $padding-horizontal,
+  $font-size,
+  $border-radius
+) {
+  padding: $padding-vertical $padding-horizontal;
+  font-size: $font-size;
+  border-radius: $border-radius;
+  &.is-round {
+    padding: $padding-vertical $padding-horizontal;
+  }
+}
+
+// Button
+// @mixin button-plain($color) {
+//   color: $color;
+//   background: mix($--color-white, $color, 90%);
+//   border-color: mix($--color-white, $color, 60%);
+
+//   &:hover,
+//   &:focus {
+//     background: $color;
+//     border-color: $color;
+//     color: $--color-white;
+//   }
+
+//   &:active {
+//     background: mix($--color-black, $color, $--button-active-shade-percent);
+//     border-color: mix($--color-black, $color, $--button-active-shade-percent);
+//     color: $--color-white;
+//     outline: none;
+//   }
+
+//   &.is-disabled {
+//     &,
+//     &:hover,
+//     &:focus,
+//     &:active {
+//       color: mix($--color-white, $color, 40%);
+//       background-color: mix($--color-white, $color, 90%);
+//       border-color: mix($--color-white, $color, 80%);
+//     }
+//   }
+// }
+
+// @mixin button-variant($color, $background-color, $border-color) {
+//   color: $color;
+//   background-color: $background-color;
+//   border-color: $border-color;
+
+//   &:hover,
+//   &:focus {
+//     background: mix(
+//       $--color-white,
+//       $background-color,
+//       $--button-hover-tint-percent
+//     );
+//     border-color: mix(
+//       $--color-white,
+//       $border-color,
+//       $--button-hover-tint-percent
+//     );
+//     color: $color;
+//   }
+
+//   &:active {
+//     background: mix(
+//       $--color-black,
+//       $background-color,
+//       $--button-active-shade-percent
+//     );
+//     border-color: mix(
+//       $--color-black,
+//       $border-color,
+//       $--button-active-shade-percent
+//     );
+//     color: $color;
+//     outline: none;
+//   }
+
+//   &.is-active {
+//     background: mix(
+//       $--color-black,
+//       $background-color,
+//       $--button-active-shade-percent
+//     );
+//     border-color: mix(
+//       $--color-black,
+//       $border-color,
+//       $--button-active-shade-percent
+//     );
+//     color: $color;
+//   }
+
+//   &.is-disabled {
+//     &,
+//     &:hover,
+//     &:focus,
+//     &:active {
+//       color: $--color-white;
+//       background-color: mix($background-color, $--color-white);
+//       border-color: mix($border-color, $--color-white);
+//     }
+//   }
+
+//   &.is-plain {
+//     @include button-plain($background-color);
+//   }
+// }
diff --git a/packages/discuz-design/components/button/styles/var.scss b/packages/discuz-design/components/button/styles/var.scss
index 71b534820571e466f7e1c68706ec395c53c64221..551b2ed27bc14a02353c45908c57a83f037d09cc 100644
--- a/packages/discuz-design/components/button/styles/var.scss
+++ b/packages/discuz-design/components/button/styles/var.scss
@@ -9,4 +9,47 @@
 // status: 表示组件状态或尺寸，如 hover、disabled、s、l 等
 
 // 如：$button-line-bg-color-hover
-// 如：$button-line-height-s
\ No newline at end of file
+// 如：$button-line-height-s
+
+// @TODO 这里的一些具体css值需和设计师沟通后，替换为全局变量
+
+$color-white: #fff;
+
+$button-default-font-color: var(--color-primary);
+$button-default-border-color: var(--color-primary);
+$button-default-background-color: var(--color-primary8);
+$button-default-background-color-disabled: #edf3ff;
+$button-default-border-color-disabled: #d5e3ff;
+$button-default-color-disabled: #bdd2fc;
+$button-border-radius: var(--border-radius-small);
+$button-font-weight: var(--font-size-primary);
+$button-border-base: var(--border-border);
+$button-border-dashed: 1px dashed;
+
+$button-primary-background-color: var(--color-primary);
+$button-primary-background-color-hover: #7ca5fa;
+$button-primary-background-color-disabled-hover: #bdd2fc;
+
+
+/* size 尺寸 */
+$button-large-padding-vertical: 16px;
+$button-large-padding-horizontal: 40px;
+$button-large-font-size: 16px;
+$button-large-border-radius: 3px;
+
+$button-medium-padding-vertical: 14px;
+$button-medium-padding-horizontal: 32px;
+$button-medium-font-size: 16px;
+$button-medium-border-radius: 3px;
+
+$button-small-padding-vertical: 12px;
+$button-small-padding-horizontal: 24px;
+$button-small-font-size: 16px;
+$button-small-border-radius: 3px;
+
+$button-mini-padding-vertical: 10px;
+$button-mini-padding-horizontal: 12px;
+$button-mini-font-size: 14px;
+$button-mini-border-radius: 3px;
+
+$button-hover-tint-percent: 20% !default;
diff --git a/packages/discuz-design/site/mini/src/pages/button/index.jsx b/packages/discuz-design/site/mini/src/pages/button/index.jsx
index 106b0b796789a0cda7d906e2e9520432f0decc70..2569f39715495a79e695d112a4ac593590f3d555 100644
--- a/packages/discuz-design/site/mini/src/pages/button/index.jsx
+++ b/packages/discuz-design/site/mini/src/pages/button/index.jsx
@@ -1,24 +1,39 @@
-import React, { Component } from "react";
-import Taro from '@tarojs/taro';
-import { View, Button } from "@tarojs/components";
-import Example1 from "../../../../../components/button/__examples__/mini/example1";
+import React from 'react';
+import { View } from '@tarojs/components'
 
-export default class Index extends Component {
-  componentWillMount() {}
+import Base from '../../../../../components/button/__examples__/mini/base';
+import Disbaled from '../../../../../components/button/__examples__/mini/disabled';
+import OpenType from '../../../../../components/button/__examples__/mini/openType';
+import Loading from '../../../../../components/button/__examples__/mini/loading';
+import Size from '../../../../../components/button/__examples__/mini/size';
 
-  componentDidMount() {}
+function Title(props) {
+  const style = {
+    margin: '20px 0',
+    fontSize: '32px',
+  };
+  return <View style={style}>{props.children}</View>;
+}
+
+function Preview() {
+  return (
+    <View>
+      <Title>基础用法</Title>
+      <Base></Base>
 
-  componentWillUnmount() {}
+      <Title>禁用状态</Title>
+      <Disbaled></Disbaled>
 
-  componentDidShow() {}
+      <Title>不同尺寸</Title>
+      <Size></Size>
 
-  componentDidHide() {}
+      <Title>加载中</Title>
+      <Loading></Loading>
 
-  render() {
-    return (
-      <View className="index">
-        <Example1 />
-      </View>
-    );
-  }
+      <Title>openType</Title>
+      <OpenType></OpenType>
+    </View>
+  );
 }
+
+export default Preview;
diff --git a/packages/discuz-design/site/web/pages/button.js b/packages/discuz-design/site/web/pages/button.js
index b055607c468fc7f194a1bc413cf36dc8b092b6f8..25af00c716c0594f1b4eb7ca735fca28c25f92f3 100644
--- a/packages/discuz-design/site/web/pages/button.js
+++ b/packages/discuz-design/site/web/pages/button.js
@@ -1,10 +1,38 @@
-import Button from '../../../components/button/__examples__/web/example1';
 import React from 'react';
 
+import Base from '../../../components/button/__examples__/web/base';
+import Disbaled from '../../../components/button/__examples__/web/disabled';
+import HtmlType from '../../../components/button/__examples__/web/htmlType';
+import Loading from '../../../components/button/__examples__/web/loading';
+import Size from '../../../components/button/__examples__/web/size';
+
+function View(props) {
+  return <div>{props.children}</div>;
+}
+
+function Title(props) {
+  return <h1>{props.children}</h1>;
+}
+
 function Preview() {
-  return <div>
-        <Button />
-    </div>;
+  return (
+    <View>
+      <Title>基础用法</Title>
+      <Base></Base>
+
+      <Title>禁用状态</Title>
+      <Disbaled></Disbaled>
+
+      <Title>不同尺寸</Title>
+      <Size></Size>
+
+      <Title>加载中</Title>
+      <Loading></Loading>
+
+      <Title>htmlType</Title>
+      <HtmlType></HtmlType>
+    </View>
+  );
 }
 
 export default Preview;