This section explains about different types and styles of 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 the button element using cssClass
property.
The following sample illustrates how to achieve an Outline ButtonGroup,
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';
// To render outline ButtonGroup.
class App extends React.Component<{}, {}> {
public render() {
return (
<div>
<div className='e-btn-group e-outline'>
<ButtonComponent cssClass='e-outline'>HTML</ButtonComponent>
<ButtonComponent cssClass='e-outline'>CSS</ButtonComponent>
<ButtonComponent cssClass='e-outline'>Javascript</ButtonComponent>
</div>
</div>
);
}
}
ReactDom.render(<App />,document.getElementById('buttongroup'));
<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React Button</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<link href="index.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='buttongroup'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';
// To render outline ButtonGroup.
class App extends React.Component {
render() {
return (<div>
<div className='e-btn-group e-outline'>
<ButtonComponent cssClass='e-outline'>HTML</ButtonComponent>
<ButtonComponent cssClass='e-outline'>CSS</ButtonComponent>
<ButtonComponent cssClass='e-outline'>Javascript</ButtonComponent>
</div>
</div>);
}
}
ReactDom.render(<App />, document.getElementById('buttongroup'));
ButtonGroup does not have support for
flat
andround
types.
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.
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';
// To render ButtonGroup with different styles.
class App extends React.Component<{}, {}> {
public render() {
return (
<div>
<div className='e-btn-group'>
<ButtonComponent cssClass='e-info'>View</ButtonComponent>
<ButtonComponent>Edit</ButtonComponent>
<ButtonComponent cssClass='e-danger'>Delete</ButtonComponent>
</div>
</div>
);
}
}
ReactDom.render(<App />,document.getElementById('buttongroup'));
<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React Button</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<link href="index.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='buttongroup'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';
// To render ButtonGroup with different styles.
class App extends React.Component {
render() {
return (<div>
<div className='e-btn-group'>
<ButtonComponent cssClass='e-info'>View</ButtonComponent>
<ButtonComponent>Edit</ButtonComponent>
<ButtonComponent cssClass='e-danger'>Delete</ButtonComponent>
</div>
</div>);
}
}
ReactDom.render(<App />, document.getElementById('buttongroup'));
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.