Types and styles in React Button Group

4 Sep 20265 minutes to read

This section explains the different types and styles available in the Syncfusion React Button Group component.

React Button Group types

Outline React Button Group

An outline React Button Group displays buttons with borders and transparent backgrounds. To create an outline React Button Group, add the e-outline class to the target element and to individual button elements using the cssClass property.

The following example demonstrates how to create an outline React Button Group:

import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';
// To render outline ButtonGroup.
function App() {
    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>);
}
export default App;
ReactDom.render(<App />, document.getElementById('buttongroup'));
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';

// To render outline ButtonGroup.
function App() {
  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>
  );
}
export default App;
ReactDom.render(<App />,document.getElementById('buttongroup'));

The React Button Group component does not support flat and round button types. Use predefined styles for visual customization.

React Button Group styles

The React Button Group component provides predefined styles to convey different actions and meanings. Apply these styles by adding the corresponding class name to each button element using the cssClass property.

Class Description
e-primary Represents a primary action.
e-success Represents a positive action.
e-info Represents an informative action.
e-warning Represents an action requiring caution.
e-danger Represents a negative action.

The following example demonstrates how to apply predefined styles to a React Button Group:

import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';
// To render ButtonGroup with different styles.
function App() {
    return (<div>
      <div className='e-btn-group'>
        <ButtonComponent cssClass='e-info'>View</ButtonComponent>
        <ButtonComponent>Edit</ButtonComponent>
        <ButtonComponent cssClass='e-danger'>Delete</ButtonComponent>
      </div>
    </div>);
}
export default App;
ReactDom.render(<App />, document.getElementById('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.
function App() {
  return (
    <div>
      <div className='e-btn-group'>
        <ButtonComponent cssClass='e-info'>View</ButtonComponent>
        <ButtonComponent>Edit</ButtonComponent>
        <ButtonComponent cssClass='e-danger'>Delete</ButtonComponent>
      </div>
    </div>
  );
}
export default App;
ReactDom.render(<App />,document.getElementById('buttongroup'));

Predefined React Button Group styles provide visual indication only. Ensure button content clearly describes the button’s purpose for users of assistive technologies such as screen readers.

See Also