Predefined Types
Documentation
This demo illustrates the predefined types of the Button widget. A Toast is displayed each time you click a Button.
jQuery
AngularJS
Angular
ASP.NET MVC
ASP.NET Core
<div class="dx-fieldset">
<div class="dx-field">
<div class="dx-field-label">Normal</div>
<div class="dx-field-value">
@(Html.DevExtreme().Button()
.Text("OK")
.Type(ButtonType.Normal)
.Width(90)
.OnClick("notify")
)
</div>
</div>
<div class="dx-field">
<div class="dx-field-label">Success</div>
<div class="dx-field-value">
@(Html.DevExtreme().Button()
.Text("Apply")
.Type(ButtonType.Success)
.Width(90)
.OnClick("notify")
)
</div>
</div>
<div class="dx-field">
<div class="dx-field-label">Default</div>
<div class="dx-field-value">
@(Html.DevExtreme().Button()
.Text("Done")
.Type(ButtonType.Default)
.Width(90)
.OnClick("notify")
)
</div>
</div>
<div class="dx-field">
<div class="dx-field-label">Danger</div>
<div class="dx-field-value">
@(Html.DevExtreme().Button()
.Text("Delete")
.Type(ButtonType.Danger)
.Width(90)
.OnClick("notify")
)
</div>
</div>
</div>
<div class="dx-fieldset">
<div class="dx-fieldset-header">DISABLED</div>
<div class="dx-field">
<div class="dx-field-value">
@(Html.DevExtreme().Button()
.Text("OK")
.Type(ButtonType.Normal)
.Width(90)
.Disabled(true)
)
</div>
</div>
<div class="dx-field">
<div class="dx-field-value">
@(Html.DevExtreme().Button()
.Text("Apply")
.Type(ButtonType.Success)
.Width(90)
.Disabled(true)
)
</div>
</div>
<div class="dx-field">
<div class="dx-field-value">
@(Html.DevExtreme().Button()
.Text("Done")
.Type(ButtonType.Default)
.Width(90)
.Disabled(true)
)
</div>
</div>
<div class="dx-field">
<div class="dx-field-value">
@(Html.DevExtreme().Button()
.Text("Delete")
.Type(ButtonType.Danger)
.Width(90)
.Disabled(true)
)
</div>
</div>
</div>
<script>
function notify(data) {
var buttonText = data.component.option("text");
DevExpress.ui.notify("The " + buttonText + " button was clicked");
}
</script>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web.Mvc;
namespace DevExtreme.MVC.Demos.Controllers {
public class ButtonController : Controller {
public ActionResult PredefinedTypes() {
return View();
}
}
}
.dx-viewport:not(.dx-theme-ios7) .dx-fieldset {
width: 420px;
margin: 30px auto;
}
.dx-viewport:not(.dx-theme-ios7) .dx-fieldset:first-child {
margin-top: 120px;
}
.dx-viewport:not(.dx-theme-ios7) .dx-fieldset-header {
font-size: 16px;
}
.dx-viewport:not(.dx-theme-ios7) .dx-field {
display: inline-block;
width: 24%;
}
.dx-viewport:not(.dx-theme-ios7) .dx-field-value:not(.dx-widget) > .dx-button {
float: none;
}
.dx-viewport:not(.dx-theme-ios7) .dx-field-value:not(.dx-switch):not(.dx-checkbox):not(.dx-button),
.dx-viewport:not(.dx-theme-ios7) .dx-field-label {
float: none;
width: 100%;
}
.dx-viewport:not(.dx-theme-ios7) .dx-field-label {
padding-left: 0;
}