Button - Predefined Types

The Button component supports several predefined color schemes. To apply a scheme, set the type property to one of the following values:

"normal"
"success"
"default"
"danger"

Backend API

​x
 
<div class="buttons-demo">    <div class="buttons">        <div>            <div class="buttons-column">                <div class="column-header">                    Normal                </div>                <div>                    @(Html.DevExtreme().Button()                        .Text(ButtonStylingMode.Contained.ToString())                        .Type(ButtonType.Normal)                        .StylingMode(ButtonStylingMode.Contained)                        .Width(120)                        .OnClick("notify")                    )                </div>                <div>                    @(Html.DevExtreme().Button()                        .Text(ButtonStylingMode.Outlined.ToString())                        .Type(ButtonType.Normal)                        .StylingMode(ButtonStylingMode.Outlined)                        .Width(120)                        .OnClick("notify")                    )                </div>                <div>                    @(Html.DevExtreme().Button()                        .Text(ButtonStylingMode.Text.ToString())                        .Type(ButtonType.Normal)                        .StylingMode(ButtonStylingMode.Text)                        .Width(120)                        .OnClick("notify")                    )                </div>            </div>            <div class="buttons-column">                <div class="column-header">                    Success                </div>                <div>                    @(Html.DevExtreme().Button()                        .Text(ButtonStylingMode.Contained.ToString())                        .Type(ButtonType.Success)                        .StylingMode(ButtonStylingMode.Contained)                        .Width(120)                        .OnClick("notify")                    )                </div>                <div>                    @(Html.DevExtreme().Button()                        .Text(ButtonStylingMode.Outlined.ToString())                        .Type(ButtonType.Success)                        .StylingMode(ButtonStylingMode.Outlined)                        .Width(120)                        .OnClick("notify")                    )                </div>                <div>                    @(Html.DevExtreme().Button()                        .Text(ButtonStylingMode.Text.ToString())                        .Type(ButtonType.Success)                        .StylingMode(ButtonStylingMode.Text)                        .Width(120)                        .OnClick("notify")                    )                </div>            </div>        </div>        <div>            <div class="buttons-column">                <div class="column-header">                    Default                </div>                <div>                    @(Html.DevExtreme().Button()                        .Text(ButtonStylingMode.Contained.ToString())                        .Type(ButtonType.Default)                        .StylingMode(ButtonStylingMode.Contained)                        .Width(120)                        .OnClick("notify")                    )                </div>                <div>                    @(Html.DevExtreme().Button()                        .Text(ButtonStylingMode.Outlined.ToString())                        .Type(ButtonType.Default)                        .StylingMode(ButtonStylingMode.Outlined)                        .Width(120)                        .OnClick("notify")                    )                </div>                <div>                    @(Html.DevExtreme().Button()                        .Text(ButtonStylingMode.Text.ToString())                        .Type(ButtonType.Default)                        .StylingMode(ButtonStylingMode.Text)                        .Width(120)                        .OnClick("notify")                    )                </div>            </div>            <div class="buttons-column">                <div class="column-header">                    Danger                </div>                <div>                    @(Html.DevExtreme().Button()                        .Text(ButtonStylingMode.Contained.ToString())                        .Type(ButtonType.Danger)                        .StylingMode(ButtonStylingMode.Contained)                        .Width(120)                        .OnClick("notify")                    )                </div>                <div>                    @(Html.DevExtreme().Button()                        .Text(ButtonStylingMode.Outlined.ToString())                        .Type(ButtonType.Danger)                        .StylingMode(ButtonStylingMode.Outlined)                        .Width(120)                        .OnClick("notify")                    )                </div>                <div>                    @(Html.DevExtreme().Button()                        .Text(ButtonStylingMode.Text.ToString())                        .Type(ButtonType.Danger)                        .StylingMode(ButtonStylingMode.Text)                        .Width(120)                        .OnClick("notify")                    )                </div>            </div>        </div>    </div></div>​<script>    function notify(e) {        var buttonText = e.component.option("text");        DevExpress.ui.notify("The " + buttonText + " button was clicked");    }</script>​

xxxxxxxxxx
 
using System;using System.Collections.Generic;using System.Linq;using Microsoft.AspNetCore.Mvc;​namespace DevExtreme.NETCore.Demos.Controllers {    public class ButtonController : Controller {        public ActionResult PredefinedTypes() {            return View();        }    }}

xxxxxxxxxx
 
.demo-container {    display: flex;    justify-content: center;    height: 450px;}​.buttons-demo {    width: 600px;    align-self: center;}​.buttons-column > .column-header {    flex-grow: 0;    width: 150px;    height: 35px;    font-size: 130%;    opacity: 0.6;    text-align: left;    padding-left: 15px;}​.buttons {    display: flex;    flex-wrap: wrap;    justify-content: center;}​.buttons > div {    width: 300px;    flex-wrap: nowrap;    display: flex;}​.buttons-column > div {    width: 150px;    height: 50px;    text-align: center;}​.buttons-column {    width: 150px;    justify-content: center;}​

To further customize the Button, use the stylingMode property. This property affects the fill and borders, and accepts the following values:

"contained"
"outlined"
"text"

To get started with the DevExtreme Button component, refer to the following tutorial for step-by-step instructions: Getting Started with Button.