diff --git a/src/code/alert.js b/src/code/alert.js
new file mode 100644
index 0000000..1721637
--- /dev/null
+++ b/src/code/alert.js
@@ -0,0 +1,74 @@
+let code = {};
+
+code.import = `
+"usingComponents": {
+    "i-alert": "../../dist/alert/index"
+}
+`;
+code.usage = `
+<i-alert>
+    An info prompt
+</i-alert>
+<i-alert type="success">
+    An success prompt
+</i-alert>
+<i-alert type="warning">
+    An warning prompt
+</i-alert>
+<i-alert type="error">
+    An error prompt
+</i-alert>
+<i-alert>
+    An info prompt
+    <view slot="desc">Content of prompt. Content of prompt.</view>
+</i-alert>
+<i-alert type="success">
+    An success prompt
+    <view slot="desc">Content of prompt. Content of prompt.</view>
+</i-alert>
+<i-alert type="warning">
+    An warning prompt
+    <view slot="desc">Content of prompt. Content of prompt.</view>
+</i-alert>
+<i-alert type="error">
+    An error prompt
+    <view slot="desc">Content of prompt. Content of prompt.</view>
+</i-alert>
+<i-alert show-icon>
+    An info prompt
+</i-alert>
+<i-alert type="success" show-icon>
+    An success prompt
+</i-alert>
+<i-alert type="warning" show-icon>
+    An warning prompt
+</i-alert>
+<i-alert type="error" show-icon>
+    An error prompt
+</i-alert>
+<i-alert show-icon desc>
+    An info prompt
+    <view slot="desc">Content of prompt. Content of prompt.</view>
+</i-alert>
+<i-alert type="success" show-icon desc>
+    An success prompt
+    <view slot="desc">Content of prompt. Content of prompt.</view>
+</i-alert>
+<i-alert type="warning" show-icon desc>
+    An warning prompt
+    <view slot="desc">Content of prompt. Content of prompt.</view>
+</i-alert>
+<i-alert type="error" show-icon desc>
+    An error prompt
+    <view slot="desc">Content of prompt. Content of prompt.</view>
+</i-alert>
+<i-alert closable bind:close="handleClick">
+    An info prompt
+</i-alert>
+<i-alert type="success" show-icon desc closable bind:close="handleClick">
+    An success prompt
+    <view slot="desc">Content of prompt. Content of prompt.</view>
+</i-alert>
+`;
+
+export default code;
\ No newline at end of file
diff --git a/src/router.js b/src/router.js
index 3df8b87..236b49d 100755
--- a/src/router.js
+++ b/src/router.js
@@ -163,6 +163,13 @@ const routers = [
         },
         component: (resolve) => require(['./views/components/badge.vue'], resolve)
     },
+    {
+        path: '/components/alert',
+        meta: {
+            title: '警告提示 Alert'
+        },
+        component: (resolve) => require(['./views/components/alert.vue'], resolve)
+    },
     {
         path: '*',
         redirect: '/'
diff --git a/src/views/components/alert.vue b/src/views/components/alert.vue
new file mode 100644
index 0000000..f0cf87e
--- /dev/null
+++ b/src/views/components/alert.vue
@@ -0,0 +1,119 @@
+<template>
+    <i-article>
+        <article>
+            <h1>Alert 警告提示</h1>
+            <Anchor title="概述" h2></Anchor>
+            <p>静态地呈现一些警告信息，可手动关闭。</p>
+            <Anchor title="使用指南" h2></Anchor>
+            <p>在 .json 中引入组件</p>
+            <i-code bg lang="json">{{ code.import }}</i-code>
+            <Anchor title="示例" h2></Anchor>
+            <i-code bg lang="html">{{ code.usage }}</i-code>
+            <ad></ad>
+
+            <div class="api">
+                <Anchor title="API" h2></Anchor>
+                <Anchor title="Alert properties" h3></Anchor>
+                <table>
+                    <thead>
+                        <tr>
+                            <th>属性</th>
+                            <th>说明</th>
+                            <th>类型</th>
+                            <th>默认值</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>i-class</td>
+                            <td>自定义 class 类名</td>
+                            <td>String</td>
+                            <td>-</td>
+                        </tr>
+                        <tr>
+                            <td>type</td>
+                            <td>警告提示样式，可选值为 info、success、warning、error</td>
+                            <td>String</td>
+                            <td>info</td>
+                        </tr>
+                        <tr>
+                            <td>closable</td>
+                            <td>是否可关闭</td>
+                            <td>Boolean</td>
+                            <td>false</td>
+                        </tr>
+                        <tr>
+                            <td>show-icon</td>
+                            <td>是否显示图标</td>
+                            <td>Boolean</td>
+                            <td>false</td>
+                        </tr>
+                        <tr>
+                            <td>desc</td>
+                            <td>是否设置了 desc slot</td>
+                            <td>Boolean</td>
+                            <td>false</td>
+                        </tr>
+                    </tbody>
+                </table>
+                <Anchor title="Alert events" h3></Anchor>
+                <table>
+                    <thead>
+                    <tr>
+                        <th>事件名</th>
+                        <th>说明</th>
+                        <th>返回值</th>
+                    </tr>
+                    </thead>
+                    <tbody>
+                    <tr>
+                        <td>bind:close</td>
+                        <td>点击关闭按钮时触发</td>
+                        <td>-</td>
+                    </tr>
+                    </tbody>
+                </table>
+                <Anchor title="Cell slot" h3></Anchor>
+                <table>
+                    <thead>
+                    <tr>
+                        <th>名称</th>
+                        <th>说明</th>
+                    </tr>
+                    </thead>
+                    <tbody>
+                    <tr>
+                        <td>默认</td>
+                        <td>标题</td>
+                    </tr>
+                    <tr>
+                        <td>desc</td>
+                        <td>描述内容</td>
+                    </tr>
+                    </tbody>
+                </table>
+            </div>
+        </article>
+    </i-article>
+</template>
+<script>
+    import iArticle from '../../components/article.vue';
+    import iCode from 'iCode';
+    import Demo from '../../components/demo.vue';
+    import Code from '../../code/alert';
+    import Anchor from '../../components/anchor.vue';
+
+    export default {
+        components: {
+            iArticle,
+            iCode,
+            Demo,
+            Anchor
+        },
+        data () {
+            return {
+                code: Code
+            }
+        }
+    }
+</script>
\ No newline at end of file