Examples

A simple success alert with a title and body text.

await la.success('Saved!', 'Your changes were saved successfully.')

Report a failure to the user.

await la.error('Oops…', 'Something went wrong. Please try again.')

Render custom HTML inside the alert body.

await la.open({
  title: 'Terms',
  html: 'Read our <a href="#">terms &amp; conditions</a> carefully.',
})

success, error, warning, info and question — animated SVG.

await la.open({ title: 'Heads up', icon: 'warning' })

Resolves true when confirmed. Use { danger: true } for destructive actions.

const ok = await la.confirm('Delete this item?', { confirmText: 'Delete', danger: true })
if (ok) await la.success('Deleted')

Three-way choice via the low-level open() and the result object.

const r = await la.open({
  title: 'Save changes?',
  buttons: { confirm: 'Save', deny: "Don't save", cancel: true },
})
if (r.confirmed) save()
else if (r.denied) discard()

Ask for input and validate it before resolving.

const name = await la.prompt('Your name?', {
  input: 'text',
  placeholder: 'e.g. Jane',
  validate: (v) => (v ? null : 'Name is required'),
})

Choose from a list of options.

const r = await la.open({
  title: 'Pick a fruit',
  input: { type: 'select', options: { apple: 'Apple', banana: 'Banana' } },
})

A segmented one-time-code input (LovelyAlert extra).

const code = await la.prompt('Enter the 6-digit code', { input: 'otp' })

Collect a 1–5 star rating (LovelyAlert extra).

const r = await la.open({ title: 'Rate us', input: 'rating' })

Run an async action on confirm; throw to show a validation error.

await la.open({
  title: 'Sign in',
  input: { type: 'password', placeholder: 'Password' },
  preConfirm: async (pwd) => {
    const res = await fetch('/api/login', { method: 'POST', body: pwd })
    if (!res.ok) throw new Error('Wrong password')
    return res.json()
  },
})

A compact, auto-dismissing, non-blocking notification.

la.toast.success('Copied to clipboard')

Multiple toasts stack in a shared per-position container.

la.toast.info('First')
la.toast.info('Second')
la.toast.info('Third')

Closes automatically after the timer; hovering pauses it.

await la.open({
  title: 'Auto-closing',
  icon: 'info',
  timer: 3000,
  timerProgressBar: true,
})

Pick a theme per alert, or set a global default.

la.theme.set('auto') // 'light' | 'dark' | 'auto'
await la.open({ title: 'Hello', theme: 'dark' })

Register a custom theme from a token map.

la.theme.define('brand', { primary: '#e11d48', bg: '#1a1320', fg: '#fce7f3' })
await la.open({ title: 'On brand', theme: 'brand', icon: 'success' })

Fire a confetti burst on success.

await la.open({ title: 'You did it! 🎉', icon: 'success', confetti: true })

Let users drag the dialog by its title.

await la.open({ title: 'Drag me', text: 'Grab the title bar.', draggable: true })

Compose an alert step by step for power users.

await la
  .build()
  .title('Subscribe')
  .icon('question')
  .input('email', { placeholder: 'you@example.com' })
  .confirmButton('Subscribe')
  .cancelButton()
  .show()

Run a sequence of alerts with automatic progress steps.

const results = await la.chain([
  { title: 'Step 1', input: 'text', inputLabel: 'Name' },
  { title: 'Step 2', input: 'email', inputLabel: 'Email' },
  { title: 'All done!', icon: 'success' },
])

Create a pre-configured API with shared defaults.

const branded = la.mixin({ theme: 'dark', confirmText: 'Got it' })
await branded.success('Reused defaults')

Switch built-in button labels; ships with en and vi.

la.locale.set('vi')
await la.open({ title: 'Xin chào', buttons: { confirm: true } })