Message

Global feedback messages as light notifications.

Basic Usage

<template>
  <bp-button @click="handleMsg">Open Message</bp-button>
</template>

<script setup lang="ts">
import { Message } from "@birdpaper-ui/components";
import { ref } from "vue";

const num = ref(1);
const handleMsg = () => {
  num.value++;

  Message.success({
    content: `success:${num.value}`,
    plain: false,
    closeable: true,
    position: "top",
    onClose: () => {
      console.log("close");
    },
  });
};
</script>

Message Type

Show different feedback types such as success, warning, and error.

<template>
  <bp-space :size="16">
    <bp-button @click="Message.text('This is a text message')">Text</bp-button>
    <bp-button @click="Message.success('Success')">Success</bp-button>
    <bp-button @click="Message.warning('Please note')">Warning</bp-button>
    <bp-button @click="Message.error('Failed')">Error</bp-button>
    <bp-button @click="Message.loading('Loading...')">Loading</bp-button>
  </bp-space>
</template>

<script setup lang="ts">
import { Message } from "@birdpaper-ui/components";
</script>

Plain Mode

Use plain: true for a simpler style.

<template>
  <bp-space :size="16">
    <bp-button @click="handleDefault">Default style</bp-button>
    <bp-button @click="handlePlain">Simple mode</bp-button>
  </bp-space>
</template>

<script setup lang="ts">
import { Message } from "@birdpaper-ui/components";

const handleDefault = () => {
  Message.success({ content: "Default style message" });
};

const handlePlain = () => {
  Message.success({ content: "Simple mode message", plain: true });
};
</script>

Custom Duration

Control lifetime with duration (0 keeps it open; pair with closeable: true).

<template>
  <bp-space :size="16">
    <bp-button @click="handleShort">Close in 3s</bp-button>
    <bp-button @click="handleLong">Close in 10s</bp-button>
    <bp-button @click="handleManual">Manual close</bp-button>
  </bp-space>
</template>

<script setup lang="ts">
import { Message } from "@birdpaper-ui/components";

const handleShort = () => {
  Message.text({ content: "Auto-close after 3 seconds", duration: 3000 });
};

const handleLong = () => {
  Message.text({ content: "Auto-close after 10 seconds", duration: 10000 });
};

const handleManual = () => {
  Message.text({ content: "Does not auto-close; close manually", duration: 0, closeable: true });
};
</script>

Position

Place messages with position (top / bottom).

<template>
  <bp-space :size="16">
    <bp-button @click="handleTop">Popup top</bp-button>
    <bp-button @click="handleBottom">Popup bottom</bp-button>
  </bp-space>
</template>

<script setup lang="ts">
import { Message } from "@birdpaper-ui/components";

const handleTop = () => {
  Message.success({ content: "Slide from top", position: "top" });
};

const handleBottom = () => {
  Message.success({ content: "Slide from bottom", position: "bottom" });
};
</script>

Message Options

id	Unique message id; same id updates instead of creating a new one	String	-	-
type	Message type	String	text	-
content	Message content	String	-	-
duration	Auto-close delay in ms; 0 means do not auto-close	Number	3000	-
closeable	Whether to show close Button	Boolean	-	-
plain	Whether to use plain mode	Boolean	-	-
position	Message position	String	top	-
onClose	Callback when the message closes	Function	-	-

Message Methods

Message.text	Show a text message	config: MessageInstance	-	-
Message.success	Show a success message	config: MessageInstance	-	-
Message.warning	Show a warning message	config: MessageInstance	-	-
Message.error	Show an error message	config: MessageInstance	-	-
Message.loading	Show a loading message	config: MessageInstance	-	-
Message.removeAll	Clear all messages	-	-	-