HelpBot Assistant

How can I help you?

Types and styles in React Button group component

2 Mar 20265 minutes to read

This section explains the different types and styles available in the Syncfusion ButtonGroup component.

ButtonGroup types

Outline ButtonGroup

An outline ButtonGroup displays buttons with borders and transparent backgrounds. To create an outline ButtonGroup, 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 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'));
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 ButtonGroup component does not support flat and round button types. Use predefined styles for visual customization.

ButtonGroup styles

The ButtonGroup 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 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'));
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 ButtonGroup 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