Types and Styles in React ButtonGroup component

20 Jan 2022 / 2 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 the button element using cssClass property.

The following sample illustrates how to achieve an Outline ButtonGroup,

Source

Preview

app.tsx

index.html

app.jsx

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 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.