Example

Basic alert

								
									swal('Good job!', {
	buttons: {
		confirm: {
			className : 'btn btn-success'
		}
	},
});
					
				

Alert title and text

					
						swal("Here's the title!", "...and here's the text!", {
	buttons: {
		confirm: {
			className : 'btn btn-success'
		}
	},
});
		
	

Enable warning, error, success, and info state icons

		
			swal("Good job!", "You clicked the button!", {
	icon : "warning",
	buttons: {        			
		confirm: {
			className : 'btn btn-warning'
		}
	},
});

swal("Good job!", "You clicked the button!", {
	icon : "error",
	buttons: {        			
		confirm: {
			className : 'btn btn-danger'
		}
	},
});

swal("Good job!", "You clicked the button!", {
	icon : "success",
	buttons: {        			
		confirm: {
			className : 'btn btn-success'
		}
	},
});

swal("Good job!", "You clicked the button!", {
	icon : "info",
	buttons: {        			
		confirm: {
			className : 'btn btn-info'
		}
	},
});

Change confirm button text and class

	
		swal({
	title: "Good job!",
	text: "You clicked the button!",
	icon: "success",
	buttons: {
		confirm: {
			text: "Confirm Me",
			value: true,
			visible: true,
			className: "btn btn-success",
			closeModal: true
		}
	}
});

Modal window with input field

	
		swal({
	title: 'Input Something',
	html: '
',
	content: {
		element: "input",
		attributes: {
			placeholder: "Input Something",
			type: "text",
			id: "input-field",
			className: "form-control"
		},
	},
	buttons: {
		cancel: {
			visible: true,
			className: 'btn btn-danger'
		},        			
		confirm: {
			className : 'btn btn-success'
		}
	},
}).then(
function() {
	swal("", "You entered : " + $('#input-field').val(), "success");
}
);

Closes the modal after a certain amount of time

	
swal("This modal will disappear soon!", {
	buttons: false,
	timer: 3000,
});

A warning message, with a function attached to the "Confirm" Button

	
		swal({
	title: 'Are you sure?',
	text: "You won't be able to revert this!",
	type: 'warning',
	buttons:{
		confirm: {
			text : 'Yes, delete it!',
			className : 'btn btn-success'
		},
		cancel: {
			visible: true,
			className: 'btn btn-danger'
		}
	}
}).then((Delete) => {
	if (Delete) {
		swal({
			title: 'Deleted!',
			text: 'Your file has been deleted.',
			type: 'success',
			buttons : {
				confirm: {
					className : 'btn btn-success'
				}
			}
		});
	} else {
		swal.close();
	}
});

By passing a parameter, you can execute something else for cancel

	
		swal({
	title: 'Are you sure?',
	text: "You won't be able to revert this!",
	type: 'warning',
	buttons:{
		cancel: {
			visible: true,
			text : 'No, cancel!',
			className: 'btn btn-danger'
		},
		confirm: {
			text : 'Yes, delete it!',
			className : 'btn btn-success'
		}
	}
}).then((willDelete) => {
	if (willDelete) {
		swal("Poof! Your imaginary file has been deleted!", {
			icon: "success",
			buttons : {
				confirm : {
					className: 'btn btn-success'
				}
			}
		});
	} else {
		swal("Your imaginary file is safe!", {
			buttons : {
				confirm : {
					className: 'btn btn-success'
				}
			}
		});
	}
});