Notification

A rich notification panel that slides in from the edge of the screen. Supports title, description, icons, actions, and full customization. Stacks like cards on hover.

Basic

<script setup>
import { VxNotification } from 'veloxui'

VxNotification.success('Saved', {
  message: 'Your changes have been saved.',
})
</script>

Title Only

Pass just a string for a title-only notification.

VxNotification.success('File uploaded successfully')

Position

Notifications can appear in 4 corners. Click to preview.

VxNotification.info('Title', {
  message: 'Description',
  position: 'bottom-left',
})

With Action

Add an action button for user interaction.

VxNotification({
  title: 'Update Available',
  message: 'Version 2.4.0 is ready.',
  type: 'info',
  action: {
    text: 'Update Now',
    onClick: () => installUpdate(),
  },
})

Progress Bar

VxNotification.info('Downloading', {
  message: 'Preparing file...',
  showProgress: true,
  duration: 5000,
})

HTML Content

VxNotification.info('New Comment', {
  message: '<strong>Alice</strong> commented...',
  dangerouslyUseHTMLString: true,
})

Persistent

Set duration: 0 for notifications that stay until manually closed.

VxNotification.warning('Action Required', {
  message: 'Verify your email.',
  duration: 0,
})

Custom Duration

Without Icon

VxNotification({ title: 'Plain', showIcon: false })

onClick Callback

Make the entire notification clickable.

VxNotification.info('New message', {
  message: 'Click to view',
  onClick: () => router.push('/inbox'),
})

Update Existing

Use id to update a live notification.

VxNotification({ id: 'deploy', title: 'Building...', type: 'info', duration: 0 })
// later...
VxNotification({ id: 'deploy', title: 'Deployed!', type: 'success', duration: 3000 })

Custom Style

Fully customizable: background, color, titleColor, iconColor, borderColor, borderRadius, shadow, progressColor.

VxNotification({
  title: 'Custom',
  message: 'Fully styled.',
  background: '#18181b',
  titleColor: '#fafafa',
  color: '#a1a1aa',
  iconColor: '#4ade80',
  borderColor: '#27272a',
})

Close All

VxNotification.closeAll()

Promise Support

VxNotification.success('Saved', { duration: 2000 })
  .then(() => VxNotification.info('Syncing...'))

API

VxNotification(options)

Param	Type	Default	Description
title	string	—	Notification title (required, or pass string directly)
message	string	—	Description text
type	'success' | 'warning' | 'danger' | 'info' | 'default'	'default'	Notification type
duration	number	4500	Auto-close ms. 0 = persistent
closable	boolean	true	Show close button
showIcon	boolean	true	Show type icon
icon	Component | string	—	Custom icon (SVG string)
position	'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'	'top-right'	Corner position
showProgress	boolean	false	Visual countdown bar
dangerouslyUseHTMLString	boolean	false	Render message as HTML
action	{ text, onClick }	—	Action button
id	string	—	Reuse/update existing notification
onClick	() => void	—	Click handler for entire notification
background	string	—	Custom background
color	string	—	Custom message text color
titleColor	string	—	Custom title color
iconColor	string	—	Custom icon color
borderColor	string	—	Custom border color
progressColor	string	—	Custom progress bar color
borderRadius	string	—	Custom border radius
shadow	string	—	Custom box-shadow
customClass	string	—	Extra CSS class
customStyle	CSSStyleDeclaration	—	Inline style overrides
onClose	() => void	—	Callback when closed

Methods

VxNotification.success(title, options?)
VxNotification.warning(title, options?)
VxNotification.danger(title, options?)
VxNotification.info(title, options?)
VxNotification.closeAll()
VxNotification.config({ max: 5 })

Return Value

const handle = VxNotification.success('Done')
handle.close()
handle.update({ title: 'Updated', type: 'info' })
handle.then(() => { /* after close */ })