From d9ad42dfa16f5b6f653962f84d49b62c6fd309e7 Mon Sep 17 00:00:00 2001
From: HoshinoSuzumi <master@uniiem.com>
Date: Fri, 22 Nov 2024 22:16:28 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=93=9D=20docs(message,button):=20update?=
 =?UTF-8?q?=20docs?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/content/2.components/button.md  | 14 ++++++
 docs/content/2.components/message.md | 65 ++++++++++++++++++++++++++++
 2 files changed, 79 insertions(+)
 create mode 100644 docs/content/2.components/message.md

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
+::