Vanilla UI Kit Toast v1.0.0 · datepicker →

Toasts, one file.

Zero-dependency notifications that follow your page's theme on their own. Click anything below — every card is live.

Types

Info, success, error, warning — errors announce assertively.

Toast.success('Changes saved')
Toast.error('Could not reach the server',
            { title: 'Save failed' })

Action + undo

One action button; the toast dismisses after the click.

Toast.show('Message deleted', {
  action: { label: 'Undo',
            onClick: () => restore() }
})

Promise flow

Loading → success or error, in place.

Toast.promise(saveUser(), {
  loading: 'Saving…',
  success: u => `Saved ${u.name}`,
  error:   e => `Failed: ${e.message}`
})

Positions

Six stacks; newest sits nearest the edge. Hover a stack to pause it.

Toast.defaults.position = 'top-center'

Sticky + titles

duration: 0 stays until dismissed.

Toast.warning('Reconnecting…',
  { title: 'Connection lost', duration: 0 })

Family theming

With the VC core loaded, one call themes every component.

VC.config({ accent: '#b45309' })