JSFiddle - React, Tailwind, and code Playground
HTML
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://raw.github.com/alexeevdv/jquery-ui/master/ui/jquery.ui.core.js"></script>
<script src="https://raw.github.com/alexeevdv/jquery-ui/master/ui/jquery.ui.button.js"></script>
<script src="https://raw.github.com/alexeevdv/jquery-ui/dialog-buttons-icons/ui/jquery.ui.dialog.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.0/themes/redmond/jquery-ui.css" type="text/css" media="all" />
<style>
* { font-size: 13px; }
</style>
</head>
<body>
<div id="dialog" title="jQuery UI dialog with buttons">
Hello world!
</div>
</body>
</html>
JavaScript
$(function() {
$("#dialog").dialog({
width: 600,
height: 400,
modal: true,
buttons: [
// default button
{
text: "Default",
click: function() {
alert("I am default button");
}
},
// no text specified
{
icons: { primary: "ui-icon-gear"},
click: function() {
alert("I have no text");
}
},
// text is false
{
text: false,
icons: { primary: "ui-icon-image"},
click: function() {
alert("I have no text");
}
},
// disabled button
{
text: "Disabled",
disabled: true
},
// label overrides text
{
text: "Text",
label: "Label",
click: function() {
alert("I am button with label");
},
icons: {
primary: "ui-icon-circle-close"
}
},
// all available options
{
text: true,
label: "Label2",
icons: {
primary: "ui-icon-circle-close",
secondary: "ui-icon-gear"
},
disabled: false
}
]
});
});