Types and styles in EJ2 TypeScript Button group control
10 May 20236 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 an Outline ButtonGroup, e-outline
class should be added to the target element and also add e-outline
and e-btn
class to each button elements.
The following sample illustrates how to achieve an Outline ButtonGroup.
<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Button-Group</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript UI Controls" />
<meta name="author" content="Syncfusion" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<link href="styles.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>LOADING....</div>
<div id='container'>
<div class='e-btn-group e-outline'>
<button class='e-btn e-outline'>HTML</button>
<button class='e-btn e-outline'>CSS</button>
<button class='e-btn e-outline'>Javascript</button>
</div>
</div>
</body>
</html>
#container {
visibility: hidden;
}
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
.e-btn-group {
margin: 25px 5px 20px 20px;
}
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.
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.
<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Button-Group</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript UI Controls" />
<meta name="author" content="Syncfusion" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<link href="styles.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>LOADING....</div>
<div id='container'>
<div class='e-btn-group'>
<button class='e-btn e-info'>View</button>
<button class='e-btn'>Edit</button>
<button class='e-btn e-danger'>Delete</button>
</div>
</div>
</body>
</html>
#container {
visibility: hidden;
}
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
.e-btn-group {
margin: 25px 5px 20px 20px;
}
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.