Types and Styles in Button Group Control

8 Dec 20242 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>

NOTE

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>

NOTE

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.

NOTE

View Sample in GitHub.

See also