onvshark-alert — Lightweight JS Alert Dialog

Installation

<link rel="stylesheet" href="alert.css">
<script src="alert.js"></script>

Live Demo

Close Only

Confirm & Cancel

Delete Confirmation

Without Icon

API Reference

onvsAlert(icon, type, title, message, buttons)

Parameter	Type	Description
`icon`	`boolean`	`true` = show icon · `false` = no icon
`type`	`string`	`'success'` · `'danger'` · `'warning'` · `'info'`
`title`	`string`	Alert heading text
`message`	`string \| null`	Sub-text below the title — pass `null` to omit
`buttons`	`object`	Button configuration (see below)

buttons object

{
  confirm: {
    label  : 'Delete',    // button label
    icon   : 'trash',    // 'trash' | 'check' | 'x' | 'ok'
    color  : '#fd625e',  // optional — defaults to type color
    onClick: () => {}    // optional callback
  },
  cancel: {             // optional — omit for close-only
    label  : 'Cancel',
    icon   : 'x',
    onClick: () => {}
  }
}

Code Examples

Close Only

onvsAlert(true, 'success', 'Berhasil!', 'Data berhasil disimpan.', {
  confirm: { label: 'OK', icon: 'ok' }
})

Confirm & Cancel

onvsAlert(true, 'success', 'Simpan Perubahan?', 'Pastikan data sudah benar.', {
  confirm: {
    label  : 'Confirm',
    icon   : 'check',
    onClick: () => console.log('confirmed')
  },
  cancel: { label: 'Cancel', icon: 'x' }
})

Delete (chained)

onvsAlert(true, 'danger', 'Hapus Data?', 'Data tidak bisa dikembalikan.', {
  confirm: {
    label  : 'Delete',
    icon   : 'trash',
    onClick: () => onvsAlert(true, 'success', 'Dihapus!', 'Data berhasil dihapus.', {
      confirm: { label: 'OK', icon: 'ok' }
    })
  },
  cancel: { label: 'Cancel', icon: 'x' }
})