diff --git a/docs/router/index.js b/docs/router/index.js
index e7abb93cd..8460a94e6 100644
--- a/docs/router/index.js
+++ b/docs/router/index.js
@@ -12,6 +12,7 @@ import sliderProps from 'docs/views/slider/props';
 import iconProps from 'docs/views/icon/props';
 import datePickerProps from 'docs/views/datePicker/props';
 import calendarProps from 'docs/views/calendar/props';
+import messageProps from 'docs/views/message/props';
 
 const routes = [
   {
@@ -140,6 +141,12 @@ const routes = [
     component: PageView,
     props: iconProps,
   },
+  {
+    path: '/message',
+    name: 'Message',
+    component: PageView,
+    props: messageProps,
+  },
   {
     path: '/:catchAll(.*)',
     name: 'PageNotFound',
diff --git a/docs/views/button/example/Default.vue b/docs/views/button/example/Default.vue
index 3deba7fa5..fdcf61319 100644
--- a/docs/views/button/example/Default.vue
+++ b/docs/views/button/example/Default.vue
@@ -297,9 +297,8 @@ import { ref } from 'vue';
 export default {
   setup() {
     const clickMsg = ref('No event occurred');
-    const clickBtn = (e) => {
+    const clickBtn = () => {
       clickMsg.value = 'Button was clicked!';
-      console.log('[EVUI][Button] Click event', e);
     };
     return {
       clickMsg,
diff --git a/docs/views/message/api/message.md b/docs/views/message/api/message.md
new file mode 100644
index 000000000..59c1f10e5
--- /dev/null
+++ b/docs/views/message/api/message.md
@@ -0,0 +1,51 @@
+### Desc
+$message 는 `app.config.globalProperties`에 등록되어 있어, 각 컴포넌트에서 아래처럼 사용 가능 
+```vue
+<template>
+    <ev-button
+      @click="showMsg"
+    >
+      Show Message
+    </ev-button>
+</template>
+<script>
+  import { getCurrentInstance } from 'vue';
+
+  export default {
+    setup() {
+      const { ctx } = getCurrentInstance();
+      const showMsg = () => {
+        ctx.$message({
+          message: 'message',
+          // options
+        });
+      };
+      return {
+        showMsg,
+      };
+    },
+  }
+</script>
+```
+```js
+// 메시지만 입력 시,
+ctx.$message('message');
+
+// 옵션과 사용 시,
+ctx.$message({
+  message: 'message',
+  // options
+});
+```
+
+### Props
+
+| 이름 | 디폴트 | 타입 | 설명 | 종류 |
+| --- | ---- | ----- | ---- | --- |
+| type | 'info' | String | 메시지 스타일 | 'info', 'success', 'warning', 'error' |
+| message | '' | String | 메시지 창에 띄울 문구 | |
+| duration | 3000 | Number | 메시지 창 유지 시간 | |
+| showClose | false | Boolean | 닫기 버튼 노출 여부 | true, false |
+| iconClass | '' | String | 메시지 창 좌측에 띄울 EVUI 아이콘 명 | |
+| onClose | null | Function | 메시지 창이 닫힌 후 동작 | |
+| useHTML | false | Boolean | 메시지 창 문구에 HTML 사용 여부. 사용 시 message 속성에 함께 작성 | |
diff --git a/docs/views/message/example/Default.vue b/docs/views/message/example/Default.vue
new file mode 100644
index 000000000..fad6f6f27
--- /dev/null
+++ b/docs/views/message/example/Default.vue
@@ -0,0 +1,158 @@
+<template>
+  <div class="case">
+    <p class="case-title">Common</p>
+    <ev-button
+      type="info"
+      @click="showInfo"
+    >
+      Show Info
+    </ev-button>
+    <ev-button
+      type="primary"
+      @click="showSuccess"
+    >
+      Show Success
+    </ev-button>
+    <ev-button
+      type="warning"
+      @click="showWarning"
+    >
+      Show Warning
+    </ev-button>
+    <ev-button
+      type="error"
+      @click="showError"
+    >
+      Show Error
+    </ev-button>
+  </div>
+  <div class="case">
+    <p class="case-title">With Close Button</p>
+    <ev-button
+      @click="showClose"
+    >
+      Show Close
+    </ev-button>
+  </div>
+  <div class="case">
+    <p class="case-title">Custom Duration</p>
+    <ev-button
+      @click="showDuration"
+    >
+      Show Duration
+    </ev-button>
+  </div>
+  <div class="case">
+    <p class="case-title">Icon</p>
+    <ev-button
+      @click="showIcon"
+    >
+      Show Icon
+    </ev-button>
+  </div>
+  <div class="case">
+    <p class="case-title">After Closing</p>
+    <ev-button
+      @click="showOnClose"
+    >
+      Show onClose
+    </ev-button>
+    <div class="description">
+      <span class="badge">
+        After close behavior
+      </span>
+      {{ onCloseMsg }}
+    </div>
+  </div>
+  <div class="case">
+    <p class="case-title">HTML</p>
+    <ev-button
+      @click="showHTML"
+    >
+      Show HTML
+    </ev-button>
+  </div>
+</template>
+
+<script>
+import { ref, getCurrentInstance } from 'vue';
+
+export default {
+  setup() {
+    const { ctx } = getCurrentInstance();
+    const showInfo = () => {
+      ctx.$message('Infomation. This is an Info type message.');
+    };
+    const showSuccess = () => {
+      ctx.$message({
+        message: 'Success! This is an Success type message.',
+        type: 'success',
+      });
+    };
+    const showWarning = () => {
+      ctx.$message({
+        message: 'Warning. This is an Warning type message.',
+        type: 'warning',
+      });
+    };
+    const showError = () => {
+      ctx.$message({
+        message: 'Error. This is an Error type message.',
+        type: 'error',
+      });
+    };
+    const showClose = () => {
+      ctx.$message({
+        message: 'You can choose to close properties',
+        showClose: true,
+      });
+    };
+    const showDuration = () => {
+      ctx.$message({
+        message: 'You can change the duration.',
+        duration: 1500,
+      });
+    };
+    const showIcon = () => {
+      ctx.$message({
+        message: 'You can add an icon.',
+        iconClass: 'ev-icon-getmore',
+      });
+    };
+    const onCloseMsg = ref();
+    const showOnClose = () => {
+      ctx.$message({
+        message: 'You can set the behavior after closing.',
+        showClose: true,
+        onClose: () => {
+          onCloseMsg.value = 'You can set the behavior after closing!';
+        },
+      });
+    };
+    const showHTML = () => {
+      ctx.$message({
+        message: 'You <i>can enter</i> your message in <strong>html</strong>.',
+        useHTML: true,
+      });
+    };
+    return {
+      showInfo,
+      showSuccess,
+      showWarning,
+      showError,
+      showClose,
+      showDuration,
+      showIcon,
+      onCloseMsg,
+      showOnClose,
+      showHTML,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.case .ev-button {
+  margin-right: 10px;
+}
+</style>
diff --git a/docs/views/message/props.js b/docs/views/message/props.js
new file mode 100644
index 000000000..db674855e
--- /dev/null
+++ b/docs/views/message/props.js
@@ -0,0 +1,15 @@
+import { parseComponent } from 'vue-template-compiler';
+import mdText from '!!raw-loader!./api/message.md';
+import Default from './example/Default';
+import DefaultRaw from '!!raw-loader!./example/Default';
+
+export default {
+  mdText,
+  components: {
+    Default: {
+      description: '사용자 동작에 대한 알림을 표시할 수 있습니다. (버튼 클릭 시 메시지 창을 확인할 수 있습니다.)',
+      component: Default,
+      parsedData: parseComponent(DefaultRaw),
+    },
+  },
+};
diff --git a/src/components/button/Button.vue b/src/components/button/Button.vue
index 33b4b6487..0a2138748 100644
--- a/src/components/button/Button.vue
+++ b/src/components/button/Button.vue
@@ -66,7 +66,7 @@ export default {
   padding: 0 $default-padding;
   line-height: $default-height;
   font-size: $font-size-medium;
-  border-radius: $border-radius-button;
+  border-radius: $default-radius;
   cursor: pointer;
   outline: none;
   color: $color-white;
@@ -171,11 +171,11 @@ export default {
     border-left: 1px solid $color-white !important;
 
     &:first-child {
-      border-radius: $border-radius-button 0 0 $border-radius-button !important;
+      border-radius: $default-radius 0 0 $default-radius !important;
       border-left: 1px solid transparent !important;
     }
     &:last-child {
-      border-radius: 0 $border-radius-button $border-radius-button 0 !important;
+      border-radius: 0 $default-radius $default-radius 0 !important;
     }
   }
 }
diff --git a/src/components/checkbox/Checkbox.vue b/src/components/checkbox/Checkbox.vue
index 37f8d3956..e1bc9afce 100644
--- a/src/components/checkbox/Checkbox.vue
+++ b/src/components/checkbox/Checkbox.vue
@@ -167,14 +167,14 @@ export default {
       border-left: 0;
     }
     &:first-child {
-      border-radius: $border-radius-button 0 0 $border-radius-button;
+      border-radius: $default-radius 0 0 $default-radius;
 
       @include evThemify() {
         border-left: 1px solid evThemed('border-base');
       }
     }
     &:last-child {
-      border-radius: 0 $border-radius-button $border-radius-button 0;
+      border-radius: 0 $default-radius $default-radius 0;
     }
     &.checked {
       color: $color-white;
diff --git a/src/components/message/Message.vue b/src/components/message/Message.vue
new file mode 100644
index 000000000..f6c203ea6
--- /dev/null
+++ b/src/components/message/Message.vue
@@ -0,0 +1,213 @@
+<template>
+  <teleport to=".ev-message-modal">
+    <transition
+      name="ev-message-fade"
+      appear
+    >
+      <div
+        v-if="isShow"
+        class="ev-message"
+        :class="{
+          [`type-${type}`]: !!type,
+          'show-close': showClose,
+          'has-icon': iconClass,
+        }"
+        @mouseenter="clearTimer"
+        @mouseleave="startTimer"
+      >
+        <span
+          v-if="iconClass"
+          class="ev-message-icon"
+        >
+          <i
+            :class="iconClass"
+          />
+        </span>
+        <div
+          v-if="useHTML"
+          class="ev-message-content"
+          v-html="message"
+        />
+        <div
+          v-else
+          class="ev-message-content"
+        >
+          {{ message }}
+        </div>
+        <span
+          v-if="showClose"
+          class="ev-message-close"
+          @click="closeMsg"
+        >
+          <i class="ev-icon-close" />
+        </span>
+      </div>
+    </transition>
+  </teleport>
+</template>
+
+<script>
+import { reactive, toRefs, onMounted, onUnmounted } from 'vue';
+
+export default {
+  name: 'EvMessage',
+  props: {
+    type: {
+      type: String,
+      default: 'info',
+      validator: val => ['info', 'success', 'warning', 'error'].includes(val),
+    },
+    message: {
+      type: String,
+      default: '',
+    },
+    duration: {
+      type: Number,
+      default: 3000,
+    },
+    showClose: {
+      type: Boolean,
+      default: false,
+    },
+    iconClass: {
+      type: String,
+      default: '',
+    },
+    onClose: {
+      type: Function,
+      default: null,
+    },
+    useHTML: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  setup(props) {
+    const state = reactive({
+      timer: null,
+      isShow: true,
+    });
+    const clearTimer = () => {
+      clearTimeout(state.timer);
+      state.timer = null;
+    };
+    const closeMsg = () => {
+      state.isShow = false;
+      if (props.onClose) {
+        props.onClose();
+      }
+      clearTimer();
+    };
+    const startTimer = () => {
+      if (props.duration > 0) {
+        state.timer = setTimeout(() => {
+          if (state.isShow) {
+            closeMsg();
+          }
+        }, props.duration);
+      }
+    };
+    const keydown = (e) => {
+      if (e.keyCode === 27 && state.isShow) {
+        closeMsg();
+      }
+    };
+
+    onMounted(() => {
+      startTimer();
+      document.addEventListener('keydown', keydown);
+    });
+    onUnmounted(() => {
+      document.removeEventListener('keydown', keydown);
+    });
+    return {
+      startTimer,
+      clearTimer,
+      closeMsg,
+      ...toRefs(state),
+    };
+  },
+};
+</script>
+
+<style lang="scss">
+@import '../../style/index.scss';
+
+.ev-message-modal {
+  position: fixed;
+  top: 0;
+  left: 50%;
+  z-index: 900;
+  max-height: 100vh;
+  padding-top: 20px;
+  overflow: hidden;
+  transform: translateX(-50%);
+}
+.ev-message {
+  $padding-default: 20px;
+
+  display: flex;
+  position: relative;
+  width: 400px;
+  padding: $padding-default 17px;
+  margin-bottom: 10px;
+  align-items: center;
+  box-sizing: border-box;
+  border-radius: $default-radius;
+  border: 1px solid #EBEEF5;
+  background-color: #EDF2FC;
+  transition: opacity .3s, transform .3s;
+  font-size: $font-size-medium;
+  line-height: 1.5em;
+
+  &-fade-enter,
+  &-fade-leave-active {
+    opacity: 0;
+    transform: translateY(-100%);
+  }
+  &-icon {
+    position: absolute;
+    top: $padding-default;
+    left: $padding-default;
+  }
+  &-close {
+    position: absolute;
+    top: $padding-default;
+    right: $padding-default;
+    font-size: $font-size-small;
+    cursor: pointer;
+    transition: opacity $animate-base;
+
+    &:hover {
+      opacity: 0.5;
+    }
+  }
+
+  @include state('show-close') {
+    .ev-message-content {
+      margin-right: 20px;
+    }
+  }
+  @include state('has-icon') {
+    .ev-message-content {
+      margin-left: 23px;
+    }
+  }
+
+  @each $type, $color-list in (
+    'info': (#FDFDFD, #EEEEEE, #111111),
+    'success': (#F0F9EB, #E1F3D8, #67C23A),
+    'warning': (#FDF6EC, #FAECD8, #E6A23C),
+    'error': (#FEF0F0, #FDE2E2, #F56C6C),
+  ) {
+    &.type-#{$type} {
+      background-color: nth($color-list, 1);
+      border-color: nth($color-list, 2);
+      .ev-message-icon,
+      .ev-message-content {
+        color: nth($color-list, 3);
+      }
+    }
+  }
+}
+</style>
diff --git a/src/components/message/index.js b/src/components/message/index.js
new file mode 100644
index 000000000..dd514d4cc
--- /dev/null
+++ b/src/components/message/index.js
@@ -0,0 +1,20 @@
+import { defineComponent, h, render } from 'vue';
+import Component from './Message.vue';
+
+const componentObj = defineComponent(Component);
+
+const root = document.createElement('div');
+root.classList.add('ev-message-modal');
+document.body.appendChild(root);
+
+const message = (options = {}) => {
+  const msgOption = (typeof options === 'string') ? { message: options } : options;
+  const instance = h(
+    componentObj,
+    msgOption,
+  );
+  const container = document.createElement('div');
+  render(instance, container);
+};
+
+export default message;
diff --git a/src/components/radio/Radio.vue b/src/components/radio/Radio.vue
index 790aa2c59..012b91ab1 100644
--- a/src/components/radio/Radio.vue
+++ b/src/components/radio/Radio.vue
@@ -126,14 +126,14 @@ export default {
       border-left: 0;
     }
     &:first-child {
-      border-radius: $border-radius-button 0 0 $border-radius-button;
+      border-radius: $default-radius 0 0 $default-radius;
 
       @include evThemify() {
         border-left: 1px solid evThemed('border-base');
       }
     }
     &:last-child {
-      border-radius: 0 $border-radius-button $border-radius-button 0;
+      border-radius: 0 $default-radius $default-radius 0;
     }
     &.checked {
       color: $color-white;
diff --git a/src/components/slider/Slider.vue b/src/components/slider/Slider.vue
index 0f469aa73..74ebbb203 100644
--- a/src/components/slider/Slider.vue
+++ b/src/components/slider/Slider.vue
@@ -337,7 +337,7 @@ export default {
     bottom: $handle-height + 10px;
     padding: 3px 5px;
     color: $color-white;
-    border-radius: $border-radius-button;
+    border-radius: $default-radius;
     font-size: $font-size-base;
     opacity: 0;
     z-index: 850;
@@ -442,43 +442,42 @@ export default {
   @include state('show-mark') {
     padding-bottom: $handle-height;
   }
-}
-
-@include state('disabled') {
-  & {
-    cursor: not-allowed !important;
-  }
-  .ev-slider-thumb {
-    @include evThemify() {
-      background-color: evThemed('disabled');
+  @include state('disabled') {
+    &, * {
+      cursor: not-allowed !important;
     }
-    &.left,
-    &.right {
+    .ev-slider-thumb {
       @include evThemify() {
-        background-color: lighten(evThemed('disabled'), 5%);
+        background-color: evThemed('disabled');
+      }
+      &.left,
+      &.right {
+        @include evThemify() {
+          background-color: lighten(evThemed('disabled'), 5%);
+        }
       }
     }
-  }
-  .ev-slider-handle {
-    &-btn {
-      cursor: not-allowed !important;
+    .ev-slider-handle {
+      &-btn {
+        cursor: not-allowed !important;
 
-      @include evThemify() {
-        background-color: evThemed('border-light');
-        border-color: evThemed('disabled');
+        @include evThemify() {
+          background-color: evThemed('border-light');
+          border-color: evThemed('disabled');
+        }
       }
-    }
-    &.on,
-    &:hover {
-      .ev-slider-handle-btn {
-        transform: scale(1);
+      &.on,
+      &:hover {
+        .ev-slider-handle-btn {
+          transform: scale(1);
+        }
       }
     }
-  }
-  .ev-slider-tooltip,
-  .ev-slider-tooltip:before {
-    @include evThemify() {
-      background-color: evThemed('disabled');
+    .ev-slider-tooltip,
+    .ev-slider-tooltip:before {
+      @include evThemify() {
+        background-color: evThemed('disabled');
+      }
     }
   }
 }
diff --git a/src/main.js b/src/main.js
index 064d15895..48c1e6a37 100644
--- a/src/main.js
+++ b/src/main.js
@@ -12,6 +12,7 @@ import EvSlider from '@/components/slider/Slider.vue';
 import EvIcon from '@/components/icon/Icon.vue';
 import EvCalendar from '@/components/calendar/Calendar.vue';
 import EvTimePicker from '@/components/datePicker/DatePicker.vue';
+import EvMessage from '@/components/message/';
 import { version } from '../package.json';
 
 const components = [
@@ -38,6 +39,11 @@ const install = (app) => {
   components.forEach((component) => {
     app.component(component.name, component);
   });
+
+  const global = app.config.globalProperties;
+  global.$message = EvMessage;
+  global.$messagebox = () => {};
+  global.$notify = () => {};
 };
 
 const EVUI = {
diff --git a/src/style/components/input.scss b/src/style/components/input.scss
index 756babf79..c465344e1 100644
--- a/src/style/components/input.scss
+++ b/src/style/components/input.scss
@@ -50,8 +50,19 @@
   }
 }
 @include state('disabled') {
-  & {
-    cursor: not-allowed !important;
+  &.ev-input-number,
+  &.ev-text-field {
+    &, * {
+      cursor: not-allowed !important;
+    }
+    &:hover {
+      .ev-input,
+      .ev-textarea {
+        @include evThemify() {
+          border: 1px solid evThemed('error');
+        }
+      }
+    }
   }
   .ev-input,
   .ev-textarea {
@@ -67,15 +78,6 @@
       }
     }
   }
-  &.ev-text-field:hover,
-  &.ev-input-number:hover {
-    .ev-input,
-    .ev-textarea {
-      @include evThemify() {
-        border: 1px solid evThemed('error');
-      }
-    }
-  }
 }
 @include state('error') {
   .ev-input,
diff --git a/src/style/variables.scss b/src/style/variables.scss
index b351abe25..bf0c09572 100644
--- a/src/style/variables.scss
+++ b/src/style/variables.scss
@@ -11,12 +11,6 @@ $font-family-base: inherit !default;
 $color-white: #FFFFFF !default;
 $color-black: #0D0D0D !default;
 
-// etc
-$border-radius-base: 2px;
-$border-radius-button: 4px;
-$border-solid: 1px solid;
-$border-dotted: 1px dotted;
-
 // animate level
 $animate-base: 0.3s ease-in-out !default;