Kendo `k-danger` button does not work

Question

I am using Kendo MVC in a C # project.

I am trying to add a k-danger class to the kendo button. I do not know why, but it does not work, where the k-primary class works.

This is the code for my button:

 <button type='button' id='Button1' onclick='Delete(#=ID#)' class='k-button k-button-icontext k-grid-add k-danger'> // This is just showing the default button <span class='k-icon ki-trash'></span> </button> <button type='button' id='Button2' onclick='Info(#=ID#)' class='k-button k-button-icontext k-grid-add ki-pencil'> // This is showing the primary button <span class='k-icon ki-pencil'></span> </button> 

The icons work great. I searched everywhere but found nothing about it. Therefore, I conclude that there is no k-danger class, I do not know if I am mistaken.

If there is no k-danger , is there anything else I can use instead of k-danger ?

I can provide full code if necessary.

Answer 1

danger (or actually btn-danger ) is the name of the CSS class specific to Bootstrap, and indeed it does not exist in the Kendo UI stylesheet. There are two options that I would suggest:

• Assuming you have a Bootstrap stylesheet registered, try using the btn-danger CSS Bootstrap class. The downside is that you are likely to run into Kendo UI and Bootstrap style conflicts, and the resulting button look will be a combination of the styles of the two libraries.

• Create your own Kendo UI hazard button style. For example, add the following CSS rule to the stylesheet that is registered after the Kendo UI stylesheet:

   .k-button.k-danger, .k-button.k-danger:active { background-color: #f00; color: #fff; border-color: #f00; } 

Answer 2

 k-danger does not have any style in kendo css, 

You need to create your own style to get the result, or just add bootstrap css and add the class “btn btn-danger” to the Danger Button.

Check out this JsBin Demo

Js Bin Example

Answer 3

By default, kendo provides you with k-error-colored as shown here .

Other useful classes are:

• k-info-colored
• k-success-colored
• k-warning-colored

You just need to use it with k-button

This jsfiddle shows how to do this.