Calert Examples

calert({
    text: 'Type anything',
    inputs: {
      text: {
        type: 'text',
        placeholder: 'anything'
      }
    },
    buttonsPosition: 'right',
    contentPosition: 'left',
  })
  .then(value => {
    calert(`You type ${value.inputs.text}`)
  })

calert('Are you sure you want to buy this ?', {
    cancelButton: true,
    icon: 'question'
  })
  .then(result => {
    if (result.isConfirmed) {
      return calert('Operation Success', '', 'success')
    } else {
      return calert('Cancel', 'Operation Cancelled', 'error')
    }
  })

calert({
  image: {
    src: 'https://picsum.photos/200',
    alt: 'Random Photos'
  }
})

calert({
  timer: 2000,
  title: 'This will close automatically',
  confirmButton: false,
  backdropClick: false,
})

calert({
  title: {
    innerHTML: '<em>This is html title</em>'
  },
  text: {
    innerHTML: '<b>This is html text</b>'
  }
})

Backdrop manipulation

calert({
  backdropClick: false,
  text: 'outside is not clickable',
  backdrop: {
    background: 'rgba(40,255,40,0.6)',
  }
})

You can change all the styling of the overlay

ModalBox Styling

calert({
  modalBox: {
    background: 'yellow',
    filter: 'blur(2px)',
  }
})