<button class="first">Title Only</button>
<button class="second">Title and Text</button>
<button class="third">Title, Text and Icon</button>
body {
  margin: 20px auto;
  font-family: 'Lato';
  font-weight: 300;
  width: 600px;
  text-align: center;
}

button {
  background: cornflowerblue;
  color: white;
  border: none;
  padding: 10px;
  border-radius: 8px;
  font-family: 'Lato';
  margin: 5px;
  text-transform: uppercase;
  cursor: pointer;
  outline: none;
}

button:hover {
  background: orange;
}
document.querySelector(".first").addEventListener('click', function(){
  swal("Our First Alert");
});

document.querySelector(".second").addEventListener('click', function(){
  swal("Our First Alert", "With some body text!");
});

document.querySelector(".third").addEventListener('click', function(){
  swal("Our First Alert", "With some body text and success icon!", "success");
});

External CSS

  1. https://fonts.googleapis.com/css?family=Lato:300
  2. https://cdn.jsdelivr.net/npm/sweetalert2@7.12.15/dist/sweetalert2.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js
  2. https://cdn.jsdelivr.net/npm/sweetalert2@7.12.15/dist/sweetalert2.all.min.js