Types and Styles in Button Group Control
19 Dec 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>
NOTE
ButtonGroup does not have support for
flat
andround
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