Search results

Types and Styles

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.

The following sample illustrates how to achieve an Outline ButtonGroup,

razor
default.cs
<div class='e-btn-group e-outline'>
    @Html.EJS().Button("html").Content("HTML").CssClass('e-outline').Render()
    @Html.EJS().Button("css").Content("CSS").CssClass('e-outline').Render()
    @Html.EJS().Button("javacript").Content("Javascript").CssClass('e-outline').Render()
</div>
public IActionResult 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.

The following example illustrates how to achieve predefined styles in ButtonGroup.

razor
default.cs
<div class='e-btn-group'>
    @Html.EJS().Button("view").Content("View").CssClass('e-info').Render()
    @Html.EJS().Button("edit").Content("Edit").Render()
    @Html.EJS().Button("delete").Content("Delete").CssClass('e-danger').Render()
</div>
public IActionResult 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