How to add icons in React Button Group

03 Sep 20262 minutes to read

Display icons in a React Button Group by using the iconCss property of the Button component. Icons enhance visual recognition and improve user experience in React Button Groups.

The following example demonstrates how to create a React Button Group with icons:

app.jsx

import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';
// To render ButtonGroup with icons.
function App() {
    return (<div>
      <div className='e-btn-group'>
        <ButtonComponent iconCss='e-icons e-left-icon'>HTML</ButtonComponent>
        <ButtonComponent iconCss='e-icons e-middle-icon'>CSS</ButtonComponent>
        <ButtonComponent iconCss='e-icons e-right-icon'>Javascript</ButtonComponent>
      </div>
    </div>);
}
export default App;
ReactDom.render(<App />, document.getElementById('buttongroup'));

app.tsx

import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';

// To render ButtonGroup with icons.
function App() {
  return (
    <div>
      <div className='e-btn-group'>
        <ButtonComponent iconCss='e-icons e-left-icon'>HTML</ButtonComponent>
        <ButtonComponent iconCss='e-icons e-middle-icon'>CSS</ButtonComponent>
        <ButtonComponent iconCss='e-icons e-right-icon'>Javascript</ButtonComponent>
      </div>
    </div>
  );
}
export default App;
ReactDom.render(<App />,document.getElementById('buttongroup'));