Message

Used to show feedback after an activity.

Name	Category	Description	Type	Default
`type`	Style	Message type	`'success' \| 'warning' \| 'info' \| 'danger' \| 'error'`	`'info'`
`center`	Style	Whether to center text	`boolean`	`false`
`offset`	Style	Offset from top of window	`number`	`20`
`plain`	Style	Whether to use plain style (lighter bg, colored text)	`boolean`	`false`
`ghost`	Style	Whether to use ghost style (transparent bg, border only)	`boolean`	`false`
`duration`	Behavior	Display duration (ms), 0 for persistent	`number`	`3000`
`showClose`	Behavior	Whether to show close button	`boolean`	`false`
`showTimer`	Behavior	Whether to show duration progress bar	`boolean`	`true`
`max`	Behavior	Max visible messages, oldest closed when exceeded	`number`	`—`
`message`	Content	Message text	`string \| VNode`	—
`icon`	Content	Custom icon name, overrides default type icon	`string`	`—`
`PxMessage`	Method	Show message	`(options: MessageOptions \| string) => MessageHandler`	—
`PxMessage.success`	Method	Show success message	`(options: MessageOptions \| string) => MessageHandler`	—
`PxMessage.warning`	Method	Show warning message	`(options: MessageOptions \| string) => MessageHandler`	—
`PxMessage.info`	Method	Show info message	`(options: MessageOptions \| string) => MessageHandler`	—
`PxMessage.danger`	Method	Show danger message	`(options: MessageOptions \| string) => MessageHandler`	—
`PxMessage.error`	Method	Show error message	`(options: MessageOptions \| string) => MessageHandler`	—
`PxMessage.closeAll`	Method	Close all messages	`(type?: MessageType) => void`	—
`close`	Method	Close current message	`() => void`	—

Basic Usage

Displays at the top and disappears after 3 seconds.

<template>
  <px-button @click="showMessage">Show Message</px-button>
</template>

<script setup lang="ts">
import { PxMessage } from 'sakana-element';

const showMessage = () => {
  PxMessage('This is a message');
};
</script>

Different Types

Used to show feedback for success, warning, message, and error activities.

<template>
  <div class="demo-message">
    <px-button @click="showSuccess">Success</px-button>
    <px-button @click="showWarning">Warning</px-button>
    <px-button @click="showInfo">Info</px-button>
    <px-button @click="showDanger">Danger</px-button>
  </div>
</template>

<script setup lang="ts">
import { PxMessage } from 'sakana-element';

const showSuccess = () => {
  PxMessage.success('Success!');
};
const showWarning = () => {
  PxMessage.warning('Warning!');
};
const showInfo = () => {
  PxMessage.info('Info message');
};
const showDanger = () => {
  PxMessage.danger('Danger!');
};
</script>

<style scoped>
.demo-message {
  display: flex;
  gap: 12px;
}
</style>

Plain Variant

Use plain for a lighter background with colored text.

<template>
  <div class="demo-message">
    <px-button @click="showInfo">Info</px-button>
    <px-button @click="showSuccess">Success</px-button>
    <px-button @click="showWarning">Warning</px-button>
    <px-button @click="showDanger">Danger</px-button>
  </div>
</template>

<script setup lang="ts">
import { PxMessage } from 'sakana-element';

const showInfo = () => {
  PxMessage({ message: 'Plain info message', plain: true, type: 'info' });
};
const showSuccess = () => {
  PxMessage({ message: 'Plain success message', plain: true, type: 'success' });
};
const showWarning = () => {
  PxMessage({ message: 'Plain warning message', plain: true, type: 'warning' });
};
const showDanger = () => {
  PxMessage({ message: 'Plain danger message', plain: true, type: 'danger' });
};
</script>

<style scoped>
.demo-message {
  display: flex;
  gap: 12px;
}
</style>

Ghost Variant

Use ghost for a transparent background with border only.

<template>
  <div class="demo-message">
    <px-button @click="showInfo">Info</px-button>
    <px-button @click="showSuccess">Success</px-button>
    <px-button @click="showWarning">Warning</px-button>
    <px-button @click="showDanger">Danger</px-button>
  </div>
</template>

<script setup lang="ts">
import { PxMessage } from 'sakana-element';

const showInfo = () => {
  PxMessage({ message: 'Ghost info message', ghost: true, type: 'info' });
};
const showSuccess = () => {
  PxMessage({ message: 'Ghost success message', ghost: true, type: 'success' });
};
const showWarning = () => {
  PxMessage({ message: 'Ghost warning message', ghost: true, type: 'warning' });
};
const showDanger = () => {
  PxMessage({ message: 'Ghost danger message', ghost: true, type: 'danger' });
};
</script>

<style scoped>
.demo-message {
  display: flex;
  gap: 12px;
}
</style>

Custom Icon

Use the icon prop to override the default type icon.

<template>
  <div class="demo-message">
    <px-button @click="showStar">Star Icon</px-button>
    <px-button @click="showHeart">Heart Icon</px-button>
  </div>
</template>

<script setup lang="ts">
import { PxMessage } from 'sakana-element';

const showStar = () => {
  PxMessage({ message: 'Starred message!', icon: 'star', type: 'warning' });
};
const showHeart = () => {
  PxMessage({ message: 'Liked message!', icon: 'heart', type: 'danger' });
};
</script>

<style scoped>
.demo-message {
  display: flex;
  gap: 12px;
}
</style>

Closable Message

A close button can be added.

<template>
  <px-button @click="showMessage">Show Closable Message</px-button>
</template>

<script setup lang="ts">
import { PxMessage } from 'sakana-element';

const showMessage = () => {
  PxMessage({
    message: 'This is a closable message',
    showClose: true,
    duration: 0,
  });
};
</script>

Duration Timer Bar

A thin progress bar at the bottom shows the remaining duration. Controlled by showTimer (default: true).

<template>
  <div class="demo-message">
    <px-button @click="showWithTimer">With Timer Bar</px-button>
    <px-button @click="showWithoutTimer">Without Timer Bar</px-button>
    <px-button @click="showLongDuration">Long Duration (8s)</px-button>
  </div>
</template>

<script setup lang="ts">
import { PxMessage } from 'sakana-element';

const showWithTimer = () => {
  PxMessage({ message: 'Watch the timer bar below', duration: 5000 });
};
const showWithoutTimer = () => {
  PxMessage({ message: 'No timer bar here', duration: 5000, showTimer: false });
};
const showLongDuration = () => {
  PxMessage({ message: 'This stays for 8 seconds', duration: 8000, type: 'success' });
};
</script>

<style scoped>
.demo-message {
  display: flex;
  gap: 12px;
}
</style>

Centered Text

Use center attribute to center the text.

<template>
  <px-button @click="showMessage">Show Centered Message</px-button>
</template>

<script setup lang="ts">
import { PxMessage } from 'sakana-element';

const showMessage = () => {
  PxMessage({
    message: 'Centered text message',
    center: true,
  });
};
</script>

Max Visible Count

Set max to limit the number of visible messages. Oldest messages are closed when the limit is exceeded.

<template>
  <div class="demo-message">
    <px-button @click="showMessages">Show Messages (max 3)</px-button>
  </div>
</template>

<script setup lang="ts">
import { PxMessage } from 'sakana-element';

let count = 0;
const showMessages = () => {
  count++;
  PxMessage({
    message: `Message #${count}`,
    duration: 5000,
    max: 3,
  });
};
</script>

<style scoped>
.demo-message {
  display: flex;
  gap: 12px;
}
</style>

Close All Messages

Call PxMessage.closeAll() to close all messages.

<template>
  <div class="demo-message">
    <px-button @click="showMessages">Show Multiple Messages</px-button>
    <px-button @click="closeAll">Close All</px-button>
  </div>
</template>

<script setup lang="ts">
import { PxMessage } from 'sakana-element';

const showMessages = () => {
  PxMessage.success('Message 1');
  PxMessage.warning('Message 2');
  PxMessage.info('Message 3');
};

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

<style scoped>
.demo-message {
  display: flex;
  gap: 12px;
}
</style>

Message ​

Basic Usage ​

Different Types ​

Plain Variant ​

Ghost Variant ​

Custom Icon ​

Closable Message ​

Duration Timer Bar ​

Centered Text ​

Max Visible Count ​

Close All Messages ​