diff --git a/packages/varlet-cli/src/commands/dev.ts b/packages/varlet-cli/src/commands/dev.ts
index 89c3c260e37..9161139972e 100644
--- a/packages/varlet-cli/src/commands/dev.ts
+++ b/packages/varlet-cli/src/commands/dev.ts
@@ -10,6 +10,7 @@ import { VARLET_CONFIG } from '../shared/constant'
 
 export function runDevServer(port: number, config: any) {
 	const { host } = config.devServer
+  config.devServer.port = port
 	const server = new WebpackDevServer(webpack(config), config.devServer)
 
 	;(server as any).showStatus = function () {}
diff --git a/packages/varlet-ui/src/button/Button.vue b/packages/varlet-ui/src/button/Button.vue
new file mode 100644
index 00000000000..4dd39e71fb0
--- /dev/null
+++ b/packages/varlet-ui/src/button/Button.vue
@@ -0,0 +1,38 @@
+<template>
+  <button
+    v-ripple="{ disabled }"
+    class="varlet-button varlet-elevation--3"
+    :class="[
+      `varlet-button--${type}`,
+      `varlet-button--${size}`,
+      block ? 'varlet--block' : 'varlet--inline',
+      round ? 'varlet-button--round': null,
+      disabled ? 'varlet-button--disabled': null
+    ]"
+    :style="{
+      'color': color,
+      'background': background
+    }"
+    :disabled="disabled"
+    @click="$emit('click')"
+  >
+    <slot/>
+  </button>
+</template>
+
+<script lang="ts">
+import Ripple from '../ripple'
+import { defineComponent } from 'vue'
+import { props, emits } from './propsEmits'
+
+export default defineComponent({
+  name: 'VarletButton',
+  directives: { Ripple },
+  props,
+  emits
+})
+</script>
+
+<style lang="less">
+@import "./button";
+</style>
diff --git a/packages/varlet-ui/src/button/__tests__/index.spec.js b/packages/varlet-ui/src/button/__tests__/index.spec.js
new file mode 100644
index 00000000000..ef856366ffd
--- /dev/null
+++ b/packages/varlet-ui/src/button/__tests__/index.spec.js
@@ -0,0 +1,7 @@
+const Button = require('../../../cjs/button').default
+const { render } = require('@testing-library/vue')
+
+test('test button', async () => {
+  const wrapper = render(Button)
+  console.log(wrapper)
+})
diff --git a/packages/varlet-ui/src/button/button.less b/packages/varlet-ui/src/button/button.less
new file mode 100644
index 00000000000..03fd77c7c45
--- /dev/null
+++ b/packages/varlet-ui/src/button/button.less
@@ -0,0 +1,114 @@
+@import "../styles/var";
+@import "../styles/elevation";
+@import "../styles/common";
+
+@button-border-radius: 4px;
+
+@button-normal-width: 64px;
+@button-normal-height: 36px;
+@button-normal-padding: 3px 16px;
+
+@button-large-width: 78px;
+@button-large-height: 44px;
+@button-large-padding: 6px 20px;
+
+@button-small-width: 50px;
+@button-small-height: 28px;
+@button-small-padding: 2px 12px;
+
+@button-mini-width: 36px;
+@button-mini-height: 22px;
+@button-mini-padding: 1px 8px;
+
+@button-round-size: auto;
+@button-round-padding: 7px;
+
+@button-disabled-color: rgba(0,0,0,.26);
+@button-disabled-background-color: rgba(0,0,0,.12);
+
+.varlet-button {
+  justify-content: center;
+  align-items: center;
+  outline: none;
+  border: none;
+  line-height: 1.2;
+  border-radius: @button-border-radius;
+  user-select: none;
+  transition: box-shadow .2s;
+
+  &:active {
+    box-shadow:
+      0 3px 3px -2px @shadow-key-umbra-opacity,
+      0 3px 4px 0 @shadow-key-penumbra-opacity,
+      0 6px 8px 0 rgba(0, 0, 0, 0.24);
+  }
+
+  &--plain {
+    background-color: @color-background-base;
+  }
+
+  &--primary {
+    color: #fff;
+    background-color: @color-primary;
+  }
+
+  &--info {
+    color: #fff;
+    background-color: @color-info;
+  }
+
+  &--success {
+    color: #fff;
+    background-color: @color-success;
+  }
+
+  &--warning {
+    color: #fff;
+    background-color: @color-warning;
+  }
+
+  &--danger {
+    color: #fff;
+    background-color: @color-danger;
+  }
+
+  &--normal {
+    min-width: @button-normal-width;
+    min-height: @button-normal-height;
+    padding: @button-normal-padding;
+    font-size: @font-size-md;
+  }
+
+  &--large {
+    min-width: @button-large-width;
+    min-height: @button-large-height;
+    padding: @button-large-padding;
+    font-size: @font-size-lg;
+  }
+
+  &--small {
+    min-width: @button-small-width;
+    min-height: @button-small-height;
+    padding: @button-small-padding;
+    font-size: @font-size-sm;
+  }
+
+  &--mini {
+    min-width: @button-mini-width;
+    min-height: @button-mini-height;
+    padding: @button-mini-padding;
+    font-size: @font-size-xs;
+  }
+
+  &--round {
+    min-width: @button-round-size;
+    min-height: @button-round-size;
+    padding: @button-round-padding;
+    border-radius: 50%;
+  }
+
+  &--disabled {
+    background-color: @button-disabled-background-color;
+    color: @button-disabled-color;
+  }
+}
diff --git a/packages/varlet-ui/src/button/docs/en_US.md b/packages/varlet-ui/src/button/docs/en_US.md
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/packages/varlet-ui/src/button/docs/zh_CN.md b/packages/varlet-ui/src/button/docs/zh_CN.md
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/packages/varlet-ui/src/button/example/index.vue b/packages/varlet-ui/src/button/example/index.vue
new file mode 100644
index 00000000000..10604efba0b
--- /dev/null
+++ b/packages/varlet-ui/src/button/example/index.vue
@@ -0,0 +1,72 @@
+<template>
+  <div class="example">
+    <varlet-button class="example__button" type="plain" size="large">测试</varlet-button>
+
+    <varlet-button class="example__button" type="primary" size="large">测试</varlet-button>
+    <varlet-button class="example__button" type="primary" size="normal">测试</varlet-button>
+    <varlet-button class="example__button" type="primary" size="small">测试</varlet-button>
+    <varlet-button class="example__button" type="primary" size="mini">测试</varlet-button>
+
+    <varlet-button class="example__button" type="danger" size="large">测试</varlet-button>
+    <varlet-button class="example__button" type="danger">测试</varlet-button>
+    <varlet-button class="example__button" type="danger" size="small">测试</varlet-button>
+    <varlet-button class="example__button" type="danger" size="mini">测试</varlet-button>
+
+    <varlet-button class="example__button" type="info" size="normal" block>测试测试测试测试测试测试测试测试</varlet-button>
+    <varlet-button class="example__button" type="warning" size="large" block>测试</varlet-button>
+
+    <varlet-button
+      class="example__button"
+      round
+    >
+      <img style="width: 40px; height: 40px" src="https://img.yzcdn.cn/vant/logo.png">
+    </varlet-button>
+
+    <varlet-button
+      class="example__button"
+      block
+      type="warning"
+      size="large"
+      background="rgb(114, 50, 221)"
+      color="rgb(255,192,0)"
+      @click="trigger"
+    >
+      修改颜色
+    </varlet-button>
+
+    <varlet-button class="example__button" type="primary"  @click="trigger">切换状态</varlet-button>
+    <varlet-button class="example__button" type="plain" size="large" :disabled="disabled">{{ disabled ? '禁用' : '启用' }}</varlet-button>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, Ref } from 'vue'
+import Button from '..'
+
+export default defineComponent({
+  name: 'ButtonExample',
+  components: {
+    [Button.name]: Button
+  },
+  setup() {
+    const disabled: Ref<boolean> = ref(true)
+    return {
+      disabled,
+      trigger() {
+        disabled.value = !disabled.value
+      }
+    }
+  }
+})
+</script>
+
+<style lang="less">
+.example {
+  padding: 20px;
+
+  &__button {
+    margin-bottom: 20px;
+    margin-right: 20px;
+  }
+}
+</style>
diff --git a/packages/varlet-ui/src/button/index.ts b/packages/varlet-ui/src/button/index.ts
new file mode 100644
index 00000000000..c1ba3aa0a67
--- /dev/null
+++ b/packages/varlet-ui/src/button/index.ts
@@ -0,0 +1,7 @@
+import Button from './Button.vue'
+
+Button.install = function(app: any) {
+  app.component(Button.name, Button)
+}
+
+export default Button
diff --git a/packages/varlet-ui/src/button/propsEmits.ts b/packages/varlet-ui/src/button/propsEmits.ts
new file mode 100644
index 00000000000..9574d18a0a5
--- /dev/null
+++ b/packages/varlet-ui/src/button/propsEmits.ts
@@ -0,0 +1,51 @@
+function typeValidator(type: string): boolean {
+  const validTypes = ['plain', 'primary', 'info', 'success', 'warning', 'danger']
+
+  return validTypes.includes(type)
+}
+
+function sizeValidator(size: string): boolean {
+  const validSizes = ['normal', 'mini', 'small', 'large']
+
+  return validSizes.includes(size)
+}
+
+export const props = {
+  // 按钮类型
+  type: {
+    type: String,
+    default: 'plain',
+    validator: typeValidator
+  },
+  // 按钮尺寸
+  size: {
+    type: String,
+    default: 'normal',
+    validator: sizeValidator
+  },
+  // 原型按钮
+  round: {
+    type: Boolean,
+    default: false
+  },
+  // 块级元素
+  block: {
+    type: Boolean,
+    default: false
+  },
+  // 禁用按钮
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  // 按钮文字颜色
+  color: {
+    type: String
+  },
+  // 按钮背景颜色
+  background: {
+    type: String
+  }
+}
+
+export const emits = ['click']
diff --git a/packages/varlet-ui/src/ripple/index.ts b/packages/varlet-ui/src/ripple/index.ts
index eaf5028ad39..e5792a746a8 100644
--- a/packages/varlet-ui/src/ripple/index.ts
+++ b/packages/varlet-ui/src/ripple/index.ts
@@ -12,7 +12,8 @@ interface RippleStyles {
 }
 
 interface RippleOptions {
-  color?: string
+  color?: string,
+  disabled?: string
 }
 
 interface RippleHTMLElement extends HTMLElement {
@@ -39,6 +40,10 @@ function computeRippleStyles(element: RippleHTMLElement, event: TouchEvent): Rip
 }
 
 function createRipple(this: RippleHTMLElement, event: TouchEvent) {
+  if (this._ripple?.disabled) {
+    return
+  }
+
   const { x, y, centerX, centerY, size }: RippleStyles = computeRippleStyles(this, event)
 
   const ripple: RippleHTMLElement = document.createElement('div')
@@ -100,10 +105,6 @@ function unmounted(el: RippleHTMLElement) {
 }
 
 function updated(el: RippleHTMLElement, binding: DirectiveBinding<RippleOptions>) {
-  if (binding.value === binding.oldValue) {
-    return
-  }
-
   el._ripple = binding.value
 }
 
@@ -112,7 +113,7 @@ const Ripple: Directive & Plugin = {
   unmounted,
   updated,
   install(app: any) {
-    app.directive('VarletRipple', this)
+    app.directive('ripple', this)
   }
 }
 
diff --git a/packages/varlet-ui/src/styles/common.less b/packages/varlet-ui/src/styles/common.less
index 04579f621e1..4e1ac74ccc5 100644
--- a/packages/varlet-ui/src/styles/common.less
+++ b/packages/varlet-ui/src/styles/common.less
@@ -3,4 +3,12 @@
   &--hidden {
     overflow: hidden;
   }
+
+  &--block {
+    display: flex;
+  }
+
+  &--inline {
+    display: inline-flex;
+  }
 }
diff --git a/packages/varlet-ui/src/styles/elevation.less b/packages/varlet-ui/src/styles/elevation.less
new file mode 100644
index 00000000000..9d1725dfaf7
--- /dev/null
+++ b/packages/varlet-ui/src/styles/elevation.less
@@ -0,0 +1,181 @@
+@shadow-key-umbra-opacity: rgba(0, 0, 0, 0.2);
+@shadow-key-penumbra-opacity: rgba(0, 0, 0, 0.14);
+@shadow-key-ambient-opacity: rgba(0, 0, 0, 0.12);
+
+.varlet-elevation {
+
+  &--0 {
+    box-shadow:
+      0 0 0 0 @shadow-key-umbra-opacity,
+      0 0 0 0 @shadow-key-penumbra-opacity,
+      0 0 0 0 @shadow-key-ambient-opacity
+  }
+
+  &--1 {
+    box-shadow:
+      0 2px 1px -1px @shadow-key-umbra-opacity,
+      0 1px 1px 0 @shadow-key-penumbra-opacity,
+      0 1px 3px 0 @shadow-key-ambient-opacity
+  }
+
+  &--2 {
+    box-shadow:
+      0 3px 1px -2px @shadow-key-umbra-opacity,
+      0 2px 2px 0 @shadow-key-penumbra-opacity,
+      0 1px 5px 0 @shadow-key-ambient-opacity
+  }
+
+  &--3 {
+    box-shadow:
+      0 3px 3px -2px @shadow-key-umbra-opacity,
+      0 3px 4px 0 @shadow-key-penumbra-opacity,
+      0 1px 8px 0 @shadow-key-ambient-opacity
+  }
+
+  &--4 {
+    box-shadow:
+      0 2px 4px -1px @shadow-key-umbra-opacity,
+      0 4px 5px 0 @shadow-key-penumbra-opacity,
+      0 1px 10px 0 @shadow-key-ambient-opacity
+  }
+
+  &--5 {
+    box-shadow:
+      0 3px 5px -1px @shadow-key-umbra-opacity,
+      0 5px 8px 0 @shadow-key-penumbra-opacity,
+      0 1px 14px 0 @shadow-key-ambient-opacity
+  }
+
+  &--6 {
+    box-shadow:
+      0 3px 5px -1px @shadow-key-umbra-opacity,
+      0 6px 10px 0 @shadow-key-penumbra-opacity,
+      0 1px 18px 0 @shadow-key-ambient-opacity
+  }
+
+  &--7 {
+    box-shadow:
+      0 4px 5px -2px @shadow-key-umbra-opacity,
+      0 7px 10px 1px @shadow-key-penumbra-opacity,
+      0 2px 16px 1px @shadow-key-ambient-opacity
+  }
+
+  &--8 {
+    box-shadow:
+      0 5px 5px -3px @shadow-key-umbra-opacity,
+      0 8px 10px 1px @shadow-key-penumbra-opacity,
+      0 3px 14px 2px @shadow-key-ambient-opacity
+  }
+
+  &--9 {
+    box-shadow:
+      0 5px 6px -3px @shadow-key-umbra-opacity,
+      0 9px 12px 1px @shadow-key-penumbra-opacity,
+      0 3px 16px 2px @shadow-key-ambient-opacity
+  }
+
+  &--10 {
+    box-shadow:
+      0 6px 6px -3px @shadow-key-umbra-opacity,
+      0 10px 14px 1px @shadow-key-penumbra-opacity,
+      0 4px 18px 3px @shadow-key-ambient-opacity
+  }
+
+  &--11 {
+    box-shadow:
+      0 6px 7px -4px @shadow-key-umbra-opacity,
+      0 11px 15px 1px @shadow-key-penumbra-opacity,
+      0 4px 20px 3px @shadow-key-ambient-opacity
+  }
+
+  &--12 {
+    box-shadow:
+      0 7px 8px -4px @shadow-key-umbra-opacity,
+      0 12px 17px 2px @shadow-key-penumbra-opacity,
+      0 5px 22px 4px @shadow-key-ambient-opacity
+  }
+
+  &--13 {
+    box-shadow:
+      0 7px 8px -4px @shadow-key-umbra-opacity,
+      0 13px 19px 2px @shadow-key-penumbra-opacity,
+      0 5px 24px 4px @shadow-key-ambient-opacity
+  }
+
+  &--14 {
+    box-shadow:
+      0 7px 9px -4px @shadow-key-umbra-opacity,
+      0 14px 21px 2px @shadow-key-penumbra-opacity,
+      0 5px 26px 4px @shadow-key-ambient-opacity
+  }
+
+  &--15 {
+    box-shadow:
+      0 8px 9px -5px @shadow-key-umbra-opacity,
+      0px 15px 22px 2px @shadow-key-penumbra-opacity,
+      0px 6px 28px 5px @shadow-key-ambient-opacity
+  }
+
+  &--16 {
+    box-shadow:
+      0 8px 10px -5px @shadow-key-umbra-opacity,
+      0 16px 24px 2px @shadow-key-penumbra-opacity,
+      0 6px 30px 5px @shadow-key-ambient-opacity
+  }
+
+  &--17 {
+    box-shadow:
+      0 8px 11px -5px @shadow-key-umbra-opacity,
+      0 17px 26px 2px @shadow-key-penumbra-opacity,
+      0 6px 32px 5px @shadow-key-ambient-opacity
+  }
+
+  &--18 {
+    box-shadow:
+      0 9px 11px -5px @shadow-key-umbra-opacity,
+      0 18px 28px 2px @shadow-key-penumbra-opacity,
+      0px 7px 34px 6px @shadow-key-ambient-opacity
+  }
+
+  &--19 {
+    box-shadow:
+      0 9px 12px -6px @shadow-key-umbra-opacity,
+      0 19px 29px 2px @shadow-key-penumbra-opacity,
+      0 7px 36px 6px @shadow-key-ambient-opacity
+  }
+
+  &--20 {
+    box-shadow:
+      0 10px 13px -6px @shadow-key-umbra-opacity,
+      0 20px 31px 3px @shadow-key-penumbra-opacity,
+      0 8px 38px 7px @shadow-key-ambient-opacity
+  }
+
+  &--21 {
+    box-shadow:
+      0 10px 13px -6px @shadow-key-umbra-opacity,
+      0 21px 33px 3px @shadow-key-penumbra-opacity,
+      0 8px 40px 7px @shadow-key-ambient-opacity
+  }
+
+  &--22 {
+    box-shadow:
+      0 10px 14px -6px @shadow-key-umbra-opacity,
+      0 22px 35px 3px @shadow-key-penumbra-opacity,
+      0 8px 42px 7px @shadow-key-ambient-opacity
+  }
+
+  &--23 {
+    box-shadow:
+      0 11px 14px -7px @shadow-key-umbra-opacity,
+      0 23px 36px 3px @shadow-key-penumbra-opacity,
+      0 9px 44px 8px @shadow-key-ambient-opacity
+  }
+
+  &--24 {
+    box-shadow:
+      0 11px 15px -7px @shadow-key-umbra-opacity,
+      0 24px 38px 3px @shadow-key-penumbra-opacity,
+      0 9px 46px 8px @shadow-key-ambient-opacity
+  }
+}
diff --git a/packages/varlet-ui/src/styles/var.less b/packages/varlet-ui/src/styles/var.less
new file mode 100644
index 00000000000..5d5a0d63e20
--- /dev/null
+++ b/packages/varlet-ui/src/styles/var.less
@@ -0,0 +1,16 @@
+// 文字
+@font-size-xs: 10px;
+@font-size-sm: 12px;
+@font-size-md: 14px;
+@font-size-lg: 16px;
+@font-weight-bold: 500;
+
+//颜色
+@color-primary: #005CAF;
+@color-info: #00BCD4;
+@color-success: #4CAF50;
+@color-warning: #FB8C00;
+@color-danger: #F44336;
+@color-background-base: #F5F5F5;
+
+
diff --git a/packages/varlet-ui/varlet.config.js b/packages/varlet-ui/varlet.config.js
index 7d4cbd78cfb..5c8f1073bc9 100644
--- a/packages/varlet-ui/varlet.config.js
+++ b/packages/varlet-ui/varlet.config.js
@@ -1,6 +1,6 @@
 module.exports = {
 	namespace: 'varlet',
-  host: '192.168.1.181',
+  host: 'localhost',
   port: 8080,
 	pc: {
 		title: 'Varlet 组件库示例',