Types and Styles

14 Mar 20222 minutes to read

This section explains about different types and styles of ButtonGroup.

ButtonGroup types

Outline ButtonGroup

An Outline ButtonGroup has a border with transparent background. To create Outline ButtonGroup, e-outline class should be added to the target element and to each button elements using CssClass property.

<div class='e-btn-group e-outline'>
    <ejs-button id="html" content="HTML" cssClass='e-outline'></ejs-button>
    <ejs-button id="css" content="CSS" cssClass='e-outline'></ejs-button>
    <ejs-button id="javascript" content="Javascript" cssClass='e-outline'></ejs-button>
</div>
public ActionResult Index()
    {
            return View();
    }

ButtonGroup does not have support for flat and round types.

ButtonGroup styles

The Essential JS 2 ButtonGroup has the following predefined styles. This can be achieved by adding corresponding class name in each button elements using CssClass property.

Class Description
e-primary Used to represent a primary action.
e-success Used to represent a positive action.
e-info Used to represent an informative action.
e-warning Used to represent an action with caution.
e-danger Used to represent a negative action. 
<div class='e-btn-group'>
    <ejs-button id="approve" content="Approve" cssClass='e-success'></ejs-button>
    <ejs-button id="reject" content="Reject" cssClass='e-warning'></ejs-button>
    <ejs-button id="view" content="View" cssClass='e-info'></ejs-button>
    <ejs-button id="edit" content="Edit" cssClass='e-primary'></ejs-button>
    <ejs-button id="delete" content="Delete" cssClass='e-danger'></ejs-button>
</div>
public ActionResult Index()
    {
            return View();
    }

Predefined ButtonGroup styles provide only the visual indication. So, ButtonGroup content should define the ButtonGroup style for the users of assistive technologies such as screen readers.

See Also