Message

Global Message Prompt: Function‑invoked prompt for brief operation feedback with auto‑timed dismissal.

Basic Usage

Use placement to control Message position, and set content for its display text

vue

<template>
  <div class="max-w-600px mx-auto">
    <div class="flex justify-center">
      <re-button @click="create('top-start')">top-start</re-button>
      <re-button @click="create('top')">top</re-button>
      <re-button @click="create('top-end')">top-end</re-button>
    </div>
    <div class="flex justify-between">
      <div class="flex flex-col items-start gap-1em">
        <re-button @click="create('left-start')">left-start</re-button>
        <re-button class="ml-0!" @click="create('left-top')">left-top</re-button>
        <re-button class="ml-0!" @click="create('left')">left</re-button>
        <re-button class="ml-0!" @click="create('left-bottom')">left-bottom</re-button>
        <re-button class="ml-0!" @click="create('left-end')">left-end</re-button>
      </div>
      <div class="flex flex-col items-end gap-1em">
        <re-button @click="create('right-start')">right-start</re-button>
        <re-button @click="create('right-top')">right-top</re-button>
        <re-button @click="create('right')">right</re-button>
        <re-button @click="create('right-bottom')">right-bottom</re-button>
        <re-button @click="create('right-end')">right-end</re-button>
      </div>
    </div>
    <div class="flex justify-center">
      <re-button @click="create('bottom-start')">bottom-start</re-button>
      <re-button @click="create('bottom')">bottom</re-button>
      <re-button @click="create('bottom-end')">bottom-end</re-button>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ReMessage, type MessagePlacement } from 'rappel-ui'

const create = (placement: MessagePlacement) => {
  ReMessage({
    placement,
    content: `a ${placement} message text `
  })
}
</script>

State

Use type to set the state of Message, or directly use the shortcut method.

vue

<template>
  <re-button @click="create()">Default</re-button>
  <re-button type="primary" @click="primary()">Primary</re-button>
  <re-button type="success" @click="success()">Success</re-button>
  <re-button type="warning" @click="warning()">Warning</re-button>
  <re-button type="error" @click="error()">Error</re-button>
  <re-button type="info" @click="info()">Info</re-button>
</template>
<script lang="ts" setup>
import { ReMessage, ReButton } from 'rappel-ui'

const create = () => {
  ReMessage('This is a message')
}

const primary = () => {
  ReMessage({ type: 'primary', content: `This is a primary message` })

  // same as above
  // ReMessage.primary('This is a primary message')
}
const success = () => {
  ReMessage({ type: 'success', content: `This is a success message` })

  // same as above
  // ReMessage.success('This is a success message')
}
const warning = () => {
  ReMessage({ type: 'warning', content: `This is a warning message` })

  // same as above
  // ReMessage.warning('This is a warning message')
}
const error = () => {
  ReMessage({ type: 'error', content: `This is an error message` })

  // same as above
  // ReMessage.error('This is an error message')
}
const info = () => {
  ReMessage({ type: 'info', content: `This is an info message` })

  // same as above
  // ReMessage.info('This is an info message')
}
</script>

Plain

Use plain to set Message background to plain.

vue

<template>
  <re-button @click="create('primary')">Primary</re-button>
  <re-button @click="create('success')">Success</re-button>
  <re-button @click="create('warning')">Warning</re-button>
  <re-button @click="create('error')">Error</re-button>
  <re-button @click="create('info')">Info</re-button>
</template>
<script lang="ts" setup>
import { ReMessage, ReButton, messageTypes } from 'rappel-ui'

const create = (type: (typeof messageTypes)[number]) => {
  ReMessage({ type, content: `This is a ${type} message`, plain: true })
}
</script>

Content

Directly pass a string as content, or use content to set Message content, is-html for render HTML content, also VNode or ()=>VNode.

vue

<template>
  <re-button @click="createString()">String</re-button>
  <re-button @click="createHTML()">HTML</re-button>
  <re-button @click="createVNode()">VNode</re-button>
  <re-button @click="createFunction()">()=>VNode</re-button>
</template>
<script lang="ts" setup>
import { h } from 'vue'
import { ReMessage, ReButton } from 'rappel-ui'

const createString = () => {
  ReMessage({
    content: 'a string message content'
  })
}

const createHTML = () => {
  ReMessage({
    content: `<i>HTML message content</i>`,
    isHtml: true
  })
}

const createVNode = () => {
  ReMessage({
    content: h('i', { style: { color: 'green' } }, 'VNode message content')
  })
}

const createFunction = () => {
  ReMessage({
    content: () => h('i', { style: { color: 'green' } }, 'VNode Function message content')
  })
}
</script>

Closable

Use show‑close to display the close button, and auto‑close to toggle automatic closing. You may manually close instances via the close button or the close() method. It also provides the closeAll() method to close all instances.

vue

<template>
  <re-button @click="create()">Closable</re-button>
  <re-button @click="nonAutoClose()">non-autoClose</re-button>
  <re-button @click="closes">Close()</re-button>
  <re-button @click="closeAll">CloseAll()</re-button>
</template>
<script lang="ts" setup>
import { ReMessage, ReButton } from 'rappel-ui'

const create = () => {
  ReMessage({ content: `This is a closable message`, showClose: true })
}

const closeArr = [] as (() => void)[]
const nonAutoClose = () => {
  const { close } = ReMessage({
    content: `This is a non-autoClose message`,
    showClose: true,
    autoClose: false
  })
  closeArr.push(close)
}

const closes = () => {
  closeArr.forEach((close) => {
    close()
  })
  closeArr.length = 0
}

const closeAll = () => {
  ReMessage.closeAll()
}
</script>

Message Options

Name	Description	Type	Default
placement	Message position	`enum`	top
content	Message content	`string` \| `HTMLElement` \| `VNode` \| `()=>VNode`	''
isHtml	Whether `content` is treated as HTML string	`boolean`	false
type	Message type	`enum`	—
plain	Whether it's a plain message	`boolean`	false
offset	Initial offset from the reference edge	`number` \| `string`	16
width	Message width	`number` \| `string`	—
height	Message height	`number` \| `string`	—
maxWidth	Message max width	`number` \| `string`	—
maxHeight	Message max height	`number` \| `string`	—
cssDuration	Duration(ms) for enter and leave transitions.	`number`	300
stayDuration	Duration(ms) for Message to stay visible	`number`	3000
zIndex	Customize stacking level of Message instances	`number`	—
icon	Customize Message prefix icon	`string` \| `Component`	—
showIcon	Whether to show Message prefix icon	`boolean`	true
closeIcon	Customize Message close icon	`string` \| `Component`	CloseShort
showClose	Whether to show Message close icon button	`boolean`	false
autoClose	Whether to enable automatic closing	`boolean`	true
floatingClass	Custom class for Message	`string` \| `object` \| `Array`	—
appendTo	Target element for appending Message	`cssSelector` \| `HTMLElement`	body
teleported	Whether to teleport Message to the `appendTo` target	`boolean`	true
onClose	Triggers when closing starts	`Function`	—
onClosed	Triggers after closing finishes	`Function`	—
onShow	Triggers when show starts	`Function`	—
onShown	Triggers after show finishes	`Function`	—

Message Instance Exposes

Name	Description	Type
close	Manually close the Message	`Function`
id	The ID of Message	`string`
actualOffset	Actual offset from the reference edge	`number` \| `string`

Message Object Global Exposes

ReMessage shortcut methods: primary, success, warning, error, info, closeAll:

Name	Description	Invocation	Type
primary	Shortcut method for Message	`ReMessage.primary(...)`	`Function`
success	Shortcut method for Message	`ReMessage.success(...)`	`Function`
warning	Shortcut method for Message	`ReMessage.warning(...)`	`Function`
error	Shortcut method for Message	`ReMessage.error(...)`	`Function`
info	Shortcut method for Message	`ReMessage.info(...)`	`Function`
closeAll	Global method for Message to close all instances	`ReMessage.closeAll()`	`Function`

Message ​

Basic Usage ​

State ​

Plain ​

Content ​

Closable ​

Message Options ​

Message Instance Exposes ​

Message Object Global Exposes ​