Notification

Displays a global notification message at a corner of the page.

Name	Category	Description	Type	Default
`type`	Style	Notification type	`'success' \| 'warning' \| 'info' \| 'danger' \| 'error'`	—
`position`	Style	Pop-up position	`'top-right' \| 'top-left' \| 'bottom-right' \| 'bottom-left'`	`'top-right'`
`offset`	Style	Offset from window edge	`number`	`20`
`plain`	Style	Plain variant (light background, colored text)	`boolean`	`false`
`ghost`	Style	Ghost variant (transparent background, border only)	`boolean`	`false`
`duration`	Behavior	Display duration (ms), 0 for persistent	`number`	`3000`
`showClose`	Behavior	Whether to show close button	`boolean`	`true`
`showTimer`	Behavior	Whether to show the duration timer bar	`boolean`	`true`
`max`	Behavior	Max visible notifications per position	`number`	—
`onClick`	Behavior	Click callback	`() => void`	—
`onClose`	Behavior	Close callback	`() => void`	—
`title`	Content	Title	`string`	—
`message`	Content	Notification content	`string \| VNode`	—
`icon`	Content	Custom icon	`string`	—
`PxNotification`	Method	Show notification	`(options: NotificationOptions) => NotificationHandler`	—
`PxNotification.success`	Method	Show success notification	`(options: NotificationOptions) => NotificationHandler`	—
`PxNotification.warning`	Method	Show warning notification	`(options: NotificationOptions) => NotificationHandler`	—
`PxNotification.info`	Method	Show info notification	`(options: NotificationOptions) => NotificationHandler`	—
`PxNotification.danger`	Method	Show danger notification	`(options: NotificationOptions) => NotificationHandler`	—
`PxNotification.error`	Method	Show error notification	`(options: NotificationOptions) => NotificationHandler`	—
`PxNotification.closeAll`	Method	Close all notifications	`(type?: NotificationType) => void`	—

Basic Usage

<template>
  <px-button @click="showNotification">Show Notification</px-button>
</template>

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

const showNotification = () => {
  PxNotification({
    title: 'Title',
    message: 'This is a notification message',
  });
};
</script>

Different Types

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

<template>
  <div class="demo-notification">
    <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 { PxNotification } from 'sakana-element';

const showSuccess = () => {
  PxNotification.success({
    title: 'Success',
    message: 'Operation completed successfully',
  });
};
const showWarning = () => {
  PxNotification.warning({
    title: 'Warning',
    message: 'This is a warning message',
  });
};
const showInfo = () => {
  PxNotification.info({
    title: 'Info',
    message: 'This is an info message',
  });
};
const showDanger = () => {
  PxNotification.danger({
    title: 'Danger',
    message: 'This is a danger message',
  });
};
</script>

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

Plain Variant

Use plain for a lighter background with colored text.

<template>
  <div class="demo-notification">
    <px-button v-for="t in types" :key="t" :type="t === 'danger' ? 'danger' : t" @click="show(t)">
      {{ t }}
    </px-button>
  </div>
</template>

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

const types = ['info', 'success', 'warning', 'danger'] as const;

const show = (type: (typeof types)[number]) => {
  PxNotification({
    title: 'Plain Notification',
    message: `This is a ${type} plain notification.`,
    type,
    plain: true,
  });
};
</script>

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

Ghost Variant

Use ghost for a transparent background with border only.

<template>
  <div class="demo-notification">
    <px-button v-for="t in types" :key="t" :type="t === 'danger' ? 'danger' : t" @click="show(t)">
      {{ t }}
    </px-button>
  </div>
</template>

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

const types = ['info', 'success', 'warning', 'danger'] as const;

const show = (type: (typeof types)[number]) => {
  PxNotification({
    title: 'Ghost Notification',
    message: `This is a ${type} ghost notification.`,
    type,
    ghost: true,
  });
};
</script>

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

Different Positions

Notification can emerge from any corner of the page.

<template>
  <div class="demo-notification">
    <px-button @click="showTopRight">Top Right</px-button>
    <px-button @click="showTopLeft">Top Left</px-button>
    <px-button @click="showBottomRight">Bottom Right</px-button>
    <px-button @click="showBottomLeft">Bottom Left</px-button>
  </div>
</template>

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

const showTopRight = () => {
  PxNotification({
    title: 'Top Right',
    message: 'This is a notification',
    position: 'top-right',
  });
};
const showTopLeft = () => {
  PxNotification({
    title: 'Top Left',
    message: 'This is a notification',
    position: 'top-left',
  });
};
const showBottomRight = () => {
  PxNotification({
    title: 'Bottom Right',
    message: 'This is a notification',
    position: 'bottom-right',
  });
};
const showBottomLeft = () => {
  PxNotification({
    title: 'Bottom Left',
    message: 'This is a notification',
    position: 'bottom-left',
  });
};
</script>

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

Custom Duration

Setting duration to 0 will not auto close the notification.

<template>
  <px-button @click="showNotification">Non-auto close</px-button>
</template>

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

const showNotification = () => {
  PxNotification({
    title: 'Notice',
    message: 'This notification will not auto close',
    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-notification">
    <px-button @click="showTimer">With Timer Bar (default)</px-button>
    <px-button @click="showNoTimer">Without Timer Bar</px-button>
  </div>
</template>

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

const showTimer = () => {
  PxNotification({
    title: 'Timer Bar',
    message: 'Watch the progress bar at the bottom.',
    type: 'info',
    duration: 5000,
  });
};

const showNoTimer = () => {
  PxNotification({
    title: 'No Timer Bar',
    message: 'Timer bar is hidden.',
    type: 'info',
    duration: 5000,
    showTimer: false,
  });
};
</script>

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

Max Visible Count

Set max to limit the number of visible notifications per position. Oldest notifications are closed when the limit is exceeded.

<template>
  <div class="demo-notification">
    <px-button @click="showNotification">Show Notification (max 3)</px-button>
  </div>
</template>

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

let count = 0;
const showNotification = () => {
  count++;
  PxNotification({
    title: `Notification #${count}`,
    message: 'Only 3 notifications are visible at once.',
    duration: 5000,
    max: 3,
  });
};
</script>

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

Notification ​

Basic Usage ​

Different Types ​

Plain Variant ​

Ghost Variant ​

Different Positions ​

Custom Duration ​

Duration Timer Bar ​

Max Visible Count ​