diff --git a/examples/routers/message.vue b/examples/routers/message.vue
index dc11d981..3217be4d 100644
--- a/examples/routers/message.vue
+++ b/examples/routers/message.vue
@@ -1,16 +1,45 @@
 <template>
-    <Button @click="loading">Display loading...</Button>
+    <div>
+        <Button type="primary" @click="info">Display info prompt</Button>
+        <Button @click="success">Display success prompt</Button>
+        <Button @click="warning">Display warning prompt</Button>
+        <Button @click="error">Display error prompt</Button>
+        <Button @click="loading">Display loading...</Button>
+        <Button @click="closable">Display a closable message</Button>
+    </div>
 </template>
 <script>
     export default {
         methods: {
+            info () {
+                this.$Message.info({
+                    content: '这是一条普通的提示',
+                    duration: 1000
+                });
+            },
+            success () {
+                this.$Message.success('This is a success tip');
+            },
+            warning () {
+                this.$Message.warning('This is a warning tip');
+            },
+            error () {
+                this.$Message.error('This is an error tip');
+            },
             loading () {
                 const msg = this.$Message.loading({
                     content: 'Loading...',
                     duration: 0
                 });
-                setTimeout(msg, 103000);
+                setTimeout(msg, 3000);
             },
+            closable () {
+                this.$Message.info({
+                    content: 'Tips for manual closing',
+                    duration: 1000,
+                    closable: true
+                });
+            }
         }
     }
 </script>
diff --git a/src/styles/components/message.less b/src/styles/components/message.less
index edee077d..8799d64e 100644
--- a/src/styles/components/message.less
+++ b/src/styles/components/message.less
@@ -2,7 +2,7 @@
 @icon-prefix-cls: ~"@{css-prefix}icon";
 
 .@{message-prefix-cls} {
-    font-size: @font-size-small;
+    font-size: @font-size-base;
     position: fixed;
     z-index: @zindex-message;
     width: 100%;
@@ -70,9 +70,13 @@
     }
 
     .@{icon-prefix-cls} {
-        margin-right: 8px;
-        font-size: 14px;
-        top: 1px;
-        position: relative;
+        margin-right: 4px;
+        font-size: @font-size-large;
+        vertical-align: middle;
+    }
+    &-custom-content{
+        span{
+            vertical-align: middle;
+        }
     }
 }
\ No newline at end of file