diff --git a/lib/app/components/Badge.vue b/lib/app/components/Badge.vue
new file mode 100644
index 0000000000..3129319198
--- /dev/null
+++ b/lib/app/components/Badge.vue
@@ -0,0 +1,46 @@
+<script>
+export default {
+  functional: true,
+  props: {
+    type: {
+      type: String,
+      default: 'tip'
+    },
+    text: String,
+    vertical: {
+      type: String,
+      default: 'top'
+    }
+  },
+  render (h, { props, slots }) {
+    return h('span', {
+      class: ['badge', props.type, props.vertical]
+    }, props.text || slots().default)
+  }
+}
+</script>
+
+<style lang="stylus">
+@import '../../default-theme/styles/config.styl'
+
+.badge
+  display inline-block
+  font-size 14px
+  height 18px
+  line-height 18px
+  border-radius 3px
+  padding 0 6px
+  color white
+  margin-right 5px
+  background-color #42b983
+  &.middle
+    vertical-align middle
+  &.top
+    vertical-align top
+  &.tip, &.green
+    background-color #42b983
+  &.error
+    background-color #DA5961 //#f66
+  &.warning, &.warn, &.yellow
+    background-color darken(#ffe564, 35%)
+</style>
diff --git a/lib/default-theme/Badge.vue b/lib/default-theme/Badge.vue
deleted file mode 100644
index 1a41d7e772..0000000000
--- a/lib/default-theme/Badge.vue
+++ /dev/null
@@ -1,30 +0,0 @@
-<script>
-export default {
-  functional: true,
-  props: ['type', 'text'],
-  render (h, { props, slots }) {
-    return h('span', {
-      class: ['badge', props.type]
-    }, props.text || slots().default)
-  }
-}
-</script>
-
-<style lang="stylus">
-@import './styles/config.styl'
-
-.badge
-  display inline-block
-  vertical-align top
-  font-size 14px
-  height 18px
-  line-height 18px
-  border-radius 9px
-  padding 0 5px
-  color white
-  margin-right 5px
-  &.tip
-    background-color #42b983
-  &.warning, &.warn
-    background-color darken(#ffe564, 35%)
-</style>