Search results

Create ButtonGroup with icons

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
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';

// 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'));
<!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>