<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.fire("Our First Alert");
});

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

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