diff --git a/docs/content/2.components/button.md b/docs/content/2.components/button.md
index 00ee2eb..82f9908 100644
--- a/docs/content/2.components/button.md
+++ b/docs/content/2.components/button.md
@@ -43,6 +43,15 @@ props:
 Button
 ::
 
+### Label
+
+::ComponentPreview
+---
+props:
+  label: Button
+---
+::
+
 ### Disabled
 
 ::ComponentPreview
@@ -62,3 +71,8 @@ props:
 ---
 Button
 ::
+
+## Config
+
+::ComponentDefaults
+::
diff --git a/docs/content/2.components/message.md b/docs/content/2.components/message.md
new file mode 100644
index 0000000..3fb3a03
--- /dev/null
+++ b/docs/content/2.components/message.md
@@ -0,0 +1,65 @@
+---
+description: The message component is used to display a message to the user
+---
+
+## Usage
+
+First add the `<RayMessages>` component to your `app.vue`.
+
+```js
+<template>
+  <NuxtLayout>
+    <NuxtPage />
+  </NuxtLayout>
+
+  <RayMessages />
+</template>
+```
+
+Then, use the `useMessage` composable to add notifications to your app anywhere you want.
+
+```vue
+<script lang="ts" setup>
+const message = useMessage()
+
+const showMessage = () => {
+  message.add({
+    content: 'Hello RayineSoft',
+    type: 'success',
+  })
+}
+</script>
+
+<template>
+  <RayButton label="Show Message" @click="showMessage" />
+</template>
+```
+
+### Type
+
+Multiple preset styles with icons and colors.
+
+::ComponentPreview
+---
+props:
+  type: info
+  content: Hello RayineSoft
+---
+::
+
+### Color
+
+Use the `color` prop to change the color of the message.
+
+::ComponentPreview
+---
+props:
+  color: amber
+  content: Hello RayineSoft
+---
+::
+
+## Config
+
+::ComponentDefaults
+::