rayine-ui/docs/content/2.components/message.md

description	since
The message component is used to display a message to the user	1.2.0

Usage

First add the <RayMessages> component to your app.vue.

<template>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>

  <RayMessages />
</template>

Then, use the useMessage composable to add messages to your app anywhere you want.

<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

::

API

Props

::ComponentProps ::

Config

::ComponentDefaults ::