Search results

Create ButtonGroup with icons in React ButtonGroup component

14 Apr 2021 / 1 minute to read

ButtonGroup with icons can be achieved by using iconCss property of the Button component.

The following example illustrates how to create ButtonGroup with icons.

Source
Preview
app.tsx
index.html
app.jsx
Copied to clipboard
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';

// To render ButtonGroup with icons.
class App extends React.Component<{}, {}> {
  public render() {
    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>
    );
  }
}
ReactDom.render(<App />,document.getElementById('buttongroup'));
Copied to clipboard
<!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>
Copied to clipboard
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';
// To render ButtonGroup with icons.
class App extends React.Component {
    render() {
        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>);
    }
}
ReactDom.render(<App />, document.getElementById('buttongroup'));