Message

A lightweight toast notification that appears at the top of the page. Fully programmatic — no component needed in your template.

Basic

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

VxMessage('Default message')
VxMessage.success('Success message')
VxMessage.warning('Warning message')
VxMessage.danger('Danger message')
VxMessage.info('Info message')
</script>

Closable

Set closable: true to show a close button.

VxMessage.success('File saved', { closable: true })

Plain Style

Use plain: true for a neutral background with colored icon and border.

VxMessage.success('Saved successfully', { plain: true })

Loading

Use VxMessage.loading() for async operations. It stays visible until you close it manually.

// Show loading, then swap to success
const handle = VxMessage.loading('Saving...')
await saveData()
handle.close()
VxMessage.success('Saved!')

// Or update in-place
const handle = VxMessage.loading('Uploading...')
await upload()
handle.update({ message: 'Upload complete!', type: 'success', duration: 2000 })

HTML Content

Set dangerouslyUseHTMLString: true to render HTML in the message.

VxMessage({
  message: 'File <strong>report.pdf</strong> uploaded',
  type: 'success',
  dangerouslyUseHTMLString: true,
})

Action Button

Add an inline action button with action: { text, onClick }.

VxMessage({
  message: 'Email archived',
  duration: 5000,
  action: {
    text: 'Undo',
    onClick: () => restoreEmail(),
  },
})

Progress Bar

Set showProgress: true to show a visual countdown.

VxMessage.success('Auto-closing...', {
  showProgress: true,
  duration: 4000,
})

Custom Position

Messages can appear in 6 positions. Click any zone to preview.

VxMessage.info('Top left', { position: 'top-left' })
VxMessage.success('Bottom right', { position: 'bottom-right' })

Without Icon

VxMessage.success('No icon', { showIcon: false })

Custom Duration

Set duration in ms. Use 0 for a persistent message (requires closable).

VxMessage.info('Quick', { duration: 1000 })
VxMessage.warning('Persistent', { duration: 0, closable: true })

Custom Icon

Pass a raw SVG string as the icon option.

VxMessage({
  message: 'Rocket launched!',
  type: 'info',
  icon: '<svg ...>...</svg>',
})

Grouping

Use grouping: true to prevent duplicate messages with the same content.

VxMessage.info('Only one shown', { grouping: true })

Update Existing

Use id to update a live message, or call update() on the handle.

// Update by ID
VxMessage({ id: 'upload', message: 'Uploading...', type: 'loading' })
// Later...
VxMessage({ id: 'upload', message: 'Done!', type: 'success', duration: 2000 })

// Or via handle
const h = VxMessage.loading('Processing...')
h.update({ message: 'Complete!', type: 'success', duration: 2000 })

Max Count

Limit the number of visible messages per position using VxMessage.config().

VxMessage.config({ max: 3 }) // only 3 visible at a time

Promise Support

Chain .then() to run code after the message closes.

VxMessage.success('Step 1 complete', { duration: 2000 })
  .then(() => VxMessage.info('Moving to step 2...'))

Custom Style

Every visual property is overridable: background, color, iconColor, borderColor, borderRadius, shadow, progressColor.

VxMessage({
  message: 'Fully customized',
  background: 'linear-gradient(135deg, #667eea, #764ba2)',
  color: '#fff',
  iconColor: '#fff',
  borderColor: 'transparent',
  borderRadius: '9999px',
  shadow: '0 4px 20px rgba(102,126,234,0.4)',
  progressColor: '#c4b5fd',
})

Close All

VxMessage.closeAll()

API

VxMessage(options)

Param	Type	Default	Description
message	string	—	Message text (or pass string directly)
type	'success' | 'warning' | 'danger' | 'info' | 'loading' | 'default'	'default'	Message type
duration	number	3000	Auto-close in ms. 0 = no auto-close
closable	boolean	false	Show close button
showIcon	boolean	true	Show type icon
icon	Component | string	—	Custom icon (Vue component or SVG string)
plain	boolean	false	Neutral background with colored icon
position	'top-center' | 'top-left' | 'top-right' | 'bottom-center' | 'bottom-left' | 'bottom-right'	'top-center'	Position on screen
showProgress	boolean	false	Visual countdown bar
dangerouslyUseHTMLString	boolean	false	Render message as HTML
action	{ text: string, onClick: () => void }	—	Inline action button
id	string	—	Reuse/update an existing message
grouping	boolean	false	Prevent duplicate messages
offset	number	16	Distance from viewport edge
background	string	—	Custom background (color, gradient)
color	string	—	Custom text 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 message closes

Methods

VxMessage.success(message, options?)
VxMessage.warning(message, options?)
VxMessage.danger(message, options?)
VxMessage.info(message, options?)
VxMessage.loading(message, options?)  // duration defaults to 0
VxMessage.closeAll()
VxMessage.config({ max: 3 })          // limit visible count

Return Value

const handle = VxMessage.success('Done')
handle.close()                        // dismiss manually
handle.update({ message: 'Updated' }) // change content/type
handle.then(() => { /* ... */ })       // runs after close