Search results

How To

The following section explains how to customize various aspects of the Button.

Create a Block Button

You can customize a Button into a Block Button that will span the entire width of its parent element. To create a Block Button, set the cssClass property to e-block.

Source
Preview
app.tsx
index.html
index.css
import * as React from 'react';
import * as ReactDom from 'react-dom';
import {ButtonComponent} from '@syncfusion/ej2-react-buttons';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

class App extends React.Component<{}, {}> {
  render() {
    return (
        <div>
            {/* Block Button. */}
            <ButtonComponent cssClass='e-block'>Block Button</ButtonComponent>

            {/* Primary Block Button. */}
            <ButtonComponent cssClass='e-block' isPrimary={true}>Block Button</ButtonComponent>

            {/* Success Block Button. */}
            <ButtonComponent cssClass='e-block e-success'>Block Button</ButtonComponent>
        </div>
    );
  }
}
ReactDom.render(<App />,document.getElementById('button'));
<!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="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='button'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>
button {
  margin: 25px 0;
}

#loader {
	color: #008cff;
	height: 40px;
	left: 45%;
	position: absolute;
	top: 45%;
	width: 30%;
}

Customize Button Appearance

You can customize the appearance of the Button by using the Cascading Style Sheets (CSS). Define the CSS according to your requirement, and assign the class name to the cssClass property. In the code following snippet the background color, text color, height, width, and sharp corner of the Button can be customized through the e-custom class for all states (hover, focus, and active).

Source
Preview
app.tsx
index.html
index.css
import * as React from 'react';
import * as ReactDom from 'react-dom';
import {ButtonComponent} from '@syncfusion/ej2-react-buttons';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

//To customize Button appearance.
//Refer the "e-custom" class details in "styles.css".
class App extends React.Component<{}, {}> {
  render() {
    return (
      <ButtonComponent cssClass='e-custom'>Custom</ButtonComponent>
    );
  }
}
ReactDom.render(<App />,document.getElementById('button'));
<!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="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='button'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>
/* To customize button appearance */
.e-custom {
  border-radius: 0;
  height: 30px;
  width: 80px;
}

.e-custom, .e-custom:hover, .e-custom:focus, .e-custom:active {
  background-color: #ff6e40;
  color: #fff;
}

#loader {
	color: #008cff;
	height: 40px;
	left: 45%;
	position: absolute;
	top: 45%;
	width: 30%;
}

Customize input and anchor elements

You can customize the appearance of the input and anchor elements using predefined styles through the class property. In the following below code, the input element is customized as a link Button by setting the e-btn e-link class, and the anchor element is customized as a primary Button by setting the e-btn e-primary class.

Source
Preview
index.html
<!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" />	
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div>
		<input type="button" id="inputbtn" value="Input Button" class="e-btn e-link">
	</div><br>
	<div>
		<a id="anchorbtn" class="e-btn e-primary" href="#">Google</a>
	</div>
</body>

</html>

Repeat Button

The Repeat button is a type of Button in that the click event is triggered at regular time interval from the pressed state till the released state.

The following example explains about how to achieve Repeat Button in mouse and touch events.

Source
Preview
app.tsx
index.html
index.css
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { enableRipple, EventHandler } from '@syncfusion/ej2-base';

enableRipple(true);

export default class App extends React.Component<{}, {}> {
    private timeout:number = null;

    mouseDownHandler(event: any): void {
       this.timeout = setInterval(function() {
        let span: HTMLElement = document.createElement('span');
        span.innerHTML = 'Button click event triggered.<hr>';
        let log: HTMLElement = document.getElementById('eventlog');
        log.insertBefore(span, log.firstChild);
       }, 200);
    }

    onClick(event: any): void {
      document.getElementById('eventlog').innerHTML = '';
    }

    mouseUpHandler(event: any): void {
        clearInterval(this.timeout);
    }

    public clickEventHandler(event: any): void {
      EventHandler.trigger(document.getElementById('btn'), "click");
      let span: HTMLElement = document.createElement('span');
      span.innerHTML = 'Button click event triggered.<hr>';
      let log: HTMLElement = document.getElementById('eventlog');
      log.insertBefore(span, log.firstChild);
    }

    render() {
        return (
            <div className='container'>
            <div className='btncontainer'>
               <ButtonComponent id='btn' content='Button' onMouseDown = { this.mouseDownHandler.bind(this)} onTouchStart = {this.mouseDownHandler.bind(this)} onMouseUp = {this.mouseUpHandler.bind(this)} onTouchEnd = {this.mouseUpHandler.bind(this)} onClick = {this.clickEventHandler.bind(this)} ></ButtonComponent>
            </div>
             <div className='event'>
              <table className='table' title ='Event Trace'>
            <tbody>
            <tr>
                <th>Event Trace</th>
            </tr>
            <tr>
                <td>
                    <div className="eventarea">
                        <span id="eventlog" ></span>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div className="evtbtn">
                        <ButtonComponent id="clr-btn" content='Clear' onClick = {this.onClick.bind(this)} ></ButtonComponent>
                    </div>
                </td>
            </tr>
        </tbody>
        </table>
            </div>
          </div>
        )
    }
}
ReactDOM.render(<App />, document.getElementById('button'));
<!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="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='button'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>
#loader {
	color: #008cff;
	height: 40px;
	left: 45%;
	position: absolute;
	top: 45%;
	width: 30%;
}

.btncontainer {
  float: left;
  width: 40%;
}

.event {
  float: right;
  width: 60%;
  border-left: 1px solid #D7D7D7;
  height:auto;
}

.eventarea {
  height: 250px;
  overflow: auto;
}

.evtbtn {
  padding:20px 0 0 20px;
}

#eventlog b {
  color: #388e3c;
}
    
hr {
   margin: 1px 10px 1px 0px;
   border-top: 1px solid #eee;
}

table {
  width:100%
}

Set the disabled state

Button component can be enabled/disabled by giving disabled property. To disable Button component, the disabled property can be set as true.

The following example demonstrates Button in disabled state.

Source
Preview
app.tsx
index.html
index.css
import * as React from 'react';
import * as ReactDom from 'react-dom';
import {ButtonComponent} from '@syncfusion/ej2-react-buttons';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

class App extends React.Component<{}, {}> {
  render() {
    return (
        <div>
            <ButtonComponent disabled={true}>Disabled</ButtonComponent>
        </div>
    );
  }
}
ReactDom.render(<App />,document.getElementById('button'));
<!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="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='button'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>
#loader {
	color: #008cff;
	height: 40px;
	left: 45%;
	position: absolute;
	top: 45%;
	width: 30%;
}

button {
  margin: 25px 5px 20px 20px;
}

.e-add-icon::before {
  content: '\e823';
}

/* To Customize big button */
.e-big-btn {
  height: 50px;
  width: 120px;
}

/* To Customize small button */
.e-small-btn {
  height: 30px;
  width: 25px;
}

.e-small-btn.e-icon-btn {
  padding: 0 6px;
  line-height: 24px;
}

@font-face {
font-family: 'settings';
src:
url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAAKAIAAAwAgT1MvMj0gSRsAAAEoAAAAVmNtYXDnEOdVAAABiAAAADZnbHlm7/npHAAAAcgAAAEwaGVhZBKtDIMAAADQAAAANmhoZWEHmQNrAAAArAAAACRobXR4B+gAAAAAAYAAAAAIbG9jYQCYAAAAAAHAAAAABm1heHABDgB0AAABCAAAACBuYW1lxmFdywAAAvgAAAIxcG9zdDwSCicAAAUsAAAANwABAAADUv9qAFoEAAAA//4D6gABAAAAAAAAAAAAAAAAAAAAAgABAAAAAQAAMLNyX18PPPUACwPoAAAAANfSY9oAAAAA19Jj2gAAAAAD6gPqAAAACAACAAAAAAAAAAEAAAACAGgAAgAAAAAAAgAAAAoACgAAAP8AAAAAAAAAAQP0AZAABQAAAnoCvAAAAIwCegK8AAAB4AAxAQIAAAIABQMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUGZFZABA5wDnAANS/2oAWgPqAJYAAAABAAAAAAAABAAAAAPoAAAAAAACAAAAAwAAABQAAwABAAAAFAAEACIAAAAEAAQAAQAA5wD//wAA5wD//wAAAAEABAAAAAEAAAAAAAAAmAAAAAIAAAAAA+oD6gALAGcAAAEOAQcuASc+ATceAQEVBgcnJiIPAQYUHwEOAQcjIgYdAR4BOwEWFwcGFB8BFjI/AR4BFxUeATsBPgE9ATY3FxYyPwE2NC8BPgE3MzI2PQE0JisBJic3NjQvASYiDwEuASc1LgEnIw4BAr4CcVVUcQMDcVRVcf7pOTRbBRQGUQYGWhAYB30LDgEPCX0OIVoHB1EFFQVbGTYeAQ4KcQsOOTRbBRQGUQYGWhAXB34LDQ8Jfg4gWgcHUQUVBVsZNh4BDgpxCQ8B9lRxAwNxVFVxAgJxAYd+DiBaBgZRBRUFWBk2Hg8KcQsOOTRbBxQHUQYGWhAYB30LDgEPCX0OIVoGBk4FFQVbGTYeDwpxCw06NFoIEwhRBgZaEBgHfQsNAQENAAAAABIA3gABAAAAAAAAAAEAAAABAAAAAAABAAgAAQABAAAAAAACAAcACQABAAAAAAADAAgAEAABAAAAAAAEAAgAGAABAAAAAAAFAAsAIAABAAAAAAAGAAgAKwABAAAAAAAKACwAMwABAAAAAAALABIAXwADAAEECQAAAAIAcQADAAEECQABABAAcwADAAEECQACAA4AgwADAAEECQADABAAkQADAAEECQAEABAAoQADAAEECQAFABYAsQADAAEECQAGABAAxwADAAEECQAKAFgA1wADAAEECQALACQBLyBzZXR0aW5nc1JlZ3VsYXJzZXR0aW5nc3NldHRpbmdzVmVyc2lvbiAxLjBzZXR0aW5nc0ZvbnQgZ2VuZXJhdGVkIHVzaW5nIFN5bmNmdXNpb24gTWV0cm8gU3R1ZGlvd3d3LnN5bmNmdXNpb24uY29tACAAcwBlAHQAdABpAG4AZwBzAFIAZQBnAHUAbABhAHIAcwBlAHQAdABpAG4AZwBzAHMAZQB0AHQAaQBuAGcAcwBWAGUAcgBzAGkAbwBuACAAMQAuADAAcwBlAHQAdABpAG4AZwBzAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAHUAcwBpAG4AZwAgAFMAeQBuAGMAZgB1AHMAaQBvAG4AIABNAGUAdAByAG8AIABTAHQAdQBkAGkAbwB3AHcAdwAuAHMAeQBuAGMAZgB1AHMAaQBvAG4ALgBjAG8AbQAAAAACAAAAAAAAAAoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIBAgEDAA1zZXR0aW5ncy0tLTExAAAA) format('truetype');
font-weight: normal;
font-style: normal;
}

.e-btn-icons {
font-family: 'settings' !important;
speak: none;
font-size: 55px;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}


.e-setting-icon::before {
  content: "\e700";
}

Right-To-Left

Button component has RTL support. This can be achieved by setting enableRtl as true.

The following example illustrates how to enable right-to-left support in Button component.

Source
Preview
app.tsx
index.html
index.css
import * as React from 'react';
import * as ReactDom from 'react-dom';
import {ButtonComponent} from '@syncfusion/ej2-react-buttons';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

class App extends React.Component<{}, {}> {
  render() {
    return (
        <div>
            <ButtonComponent enableRtl={true} iconCss='e-btn-icons e-setting-icon'>Settings</ButtonComponent>
        </div>
    );
  }
}
ReactDom.render(<App />,document.getElementById('button'));
<!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="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='button'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>
#loader {
	color: #008cff;
	height: 40px;
	left: 45%;
	position: absolute;
	top: 45%;
	width: 30%;
}

button {
  margin: 25px 5px 20px 20px;
}

.e-add-icon::before {
  content: '\e823';
}

/* To Customize big button */
.e-big-btn {
  height: 50px;
  width: 120px;
}

/* To Customize small button */
.e-small-btn {
  height: 30px;
  width: 25px;
}

.e-small-btn.e-icon-btn {
  padding: 0 6px;
  line-height: 24px;
}

@font-face {
font-family: 'settings';
src:
url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAAKAIAAAwAgT1MvMj0gSRsAAAEoAAAAVmNtYXDnEOdVAAABiAAAADZnbHlm7/npHAAAAcgAAAEwaGVhZBKtDIMAAADQAAAANmhoZWEHmQNrAAAArAAAACRobXR4B+gAAAAAAYAAAAAIbG9jYQCYAAAAAAHAAAAABm1heHABDgB0AAABCAAAACBuYW1lxmFdywAAAvgAAAIxcG9zdDwSCicAAAUsAAAANwABAAADUv9qAFoEAAAA//4D6gABAAAAAAAAAAAAAAAAAAAAAgABAAAAAQAAMLNyX18PPPUACwPoAAAAANfSY9oAAAAA19Jj2gAAAAAD6gPqAAAACAACAAAAAAAAAAEAAAACAGgAAgAAAAAAAgAAAAoACgAAAP8AAAAAAAAAAQP0AZAABQAAAnoCvAAAAIwCegK8AAAB4AAxAQIAAAIABQMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUGZFZABA5wDnAANS/2oAWgPqAJYAAAABAAAAAAAABAAAAAPoAAAAAAACAAAAAwAAABQAAwABAAAAFAAEACIAAAAEAAQAAQAA5wD//wAA5wD//wAAAAEABAAAAAEAAAAAAAAAmAAAAAIAAAAAA+oD6gALAGcAAAEOAQcuASc+ATceAQEVBgcnJiIPAQYUHwEOAQcjIgYdAR4BOwEWFwcGFB8BFjI/AR4BFxUeATsBPgE9ATY3FxYyPwE2NC8BPgE3MzI2PQE0JisBJic3NjQvASYiDwEuASc1LgEnIw4BAr4CcVVUcQMDcVRVcf7pOTRbBRQGUQYGWhAYB30LDgEPCX0OIVoHB1EFFQVbGTYeAQ4KcQsOOTRbBRQGUQYGWhAXB34LDQ8Jfg4gWgcHUQUVBVsZNh4BDgpxCQ8B9lRxAwNxVFVxAgJxAYd+DiBaBgZRBRUFWBk2Hg8KcQsOOTRbBxQHUQYGWhAYB30LDgEPCX0OIVoGBk4FFQVbGTYeDwpxCw06NFoIEwhRBgZaEBgHfQsNAQENAAAAABIA3gABAAAAAAAAAAEAAAABAAAAAAABAAgAAQABAAAAAAACAAcACQABAAAAAAADAAgAEAABAAAAAAAEAAgAGAABAAAAAAAFAAsAIAABAAAAAAAGAAgAKwABAAAAAAAKACwAMwABAAAAAAALABIAXwADAAEECQAAAAIAcQADAAEECQABABAAcwADAAEECQACAA4AgwADAAEECQADABAAkQADAAEECQAEABAAoQADAAEECQAFABYAsQADAAEECQAGABAAxwADAAEECQAKAFgA1wADAAEECQALACQBLyBzZXR0aW5nc1JlZ3VsYXJzZXR0aW5nc3NldHRpbmdzVmVyc2lvbiAxLjBzZXR0aW5nc0ZvbnQgZ2VuZXJhdGVkIHVzaW5nIFN5bmNmdXNpb24gTWV0cm8gU3R1ZGlvd3d3LnN5bmNmdXNpb24uY29tACAAcwBlAHQAdABpAG4AZwBzAFIAZQBnAHUAbABhAHIAcwBlAHQAdABpAG4AZwBzAHMAZQB0AHQAaQBuAGcAcwBWAGUAcgBzAGkAbwBuACAAMQAuADAAcwBlAHQAdABpAG4AZwBzAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAHUAcwBpAG4AZwAgAFMAeQBuAGMAZgB1AHMAaQBvAG4AIABNAGUAdAByAG8AIABTAHQAdQBkAGkAbwB3AHcAdwAuAHMAeQBuAGMAZgB1AHMAaQBvAG4ALgBjAG8AbQAAAAACAAAAAAAAAAoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIBAgEDAA1zZXR0aW5ncy0tLTExAAAA) format('truetype');
font-weight: normal;
font-style: normal;
}

.e-btn-icons {
font-family: 'settings' !important;
speak: none;
font-size: 55px;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}


.e-setting-icon::before {
  content: "\e700";
}

Tooltip for Button

Tooltip can be shown on Button hover and it can be achieved by setting title attribute.

The following snippets illustrates how to show tooltip on Button hover.

Source
Preview
app.tsx
index.html
index.css
import * as React from 'react';
import * as ReactDom from 'react-dom';
import {ButtonComponent} from '@syncfusion/ej2-react-buttons';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

class App extends React.Component<{}, {}> {
  public onCreated(): void {
    this.element.setAttribute('title','Primary Button');
  }
  render() {
    return (
        <div>
            <ButtonComponent id='btn' created={this.onCreated} isPrimary={true}>Button</ButtonComponent>
        </div>
    );
  }
}
ReactDom.render(<App />,document.getElementById('button'));
<!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="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='button'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>
/* To customize button appearance */
.e-custom {
  border-radius: 0;
  height: 30px;
  width: 80px;
}

.e-custom, .e-custom:hover, .e-custom:focus, .e-custom:active {
  background-color: #ff6e40;
  color: #fff;
}

#loader {
	color: #008cff;
	height: 40px;
	left: 45%;
	position: absolute;
	top: 45%;
	width: 30%;
}

Rounded corner

Button with rounded corner can be achieved by adding border-radius property.

In the following example, e-round-corner class is added with border-radius as 5px.

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

enableRipple(true);

// To render Button.
class App extends React.Component<{}, {}> {
  render() {
    return (
      <ButtonComponent cssClass='e-round-corner'>Button</ButtonComponent>
    );
  }
}
ReactDom.render(<App />,document.getElementById('button'));
<!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="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='button'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>

The appearance of the Button can be changed like a link by e-link class using cssClass property and link navigation can be handled in Button click.

In the following example, link is added in Button click by using window.open() method.

Source
Preview
app.tsx
index.html
index.css
import * as React from 'react';
import * as ReactDom from 'react-dom';
import {ButtonComponent} from '@syncfusion/ej2-react-buttons';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

export default class App extends React.Component<{}, {}> {
  private btnobj: any;
  //Click Event.
  btnClick(): void {
    window.open("https://www.google.com");
  }
  render() {
    return (
        <div>
            <ButtonComponent cssclass='e-link' ref={(scope) => { this.btnobj = scope; }} onClick={ this.btnClick.bind(this)}>Go to google</ButtonComponent>
        </div>
    );
  }
}
ReactDom.render(<App />,document.getElementById('button'));
<!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="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='button'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>
#loader {
	color: #008cff;
	height: 40px;
	left: 45%;
	position: absolute;
	top: 45%;
	width: 30%;
}

button {
  margin: 25px 5px 20px 20px;
}

.e-add-icon::before {
  content: '\e823';
}

/* To Customize big button */
.e-big-btn {
  height: 50px;
  width: 120px;
}

/* To Customize small button */
.e-small-btn {
  height: 30px;
  width: 25px;
}

.e-small-btn.e-icon-btn {
  padding: 0 6px;
  line-height: 24px;
}

@font-face {
font-family: 'settings';
src:
url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAAKAIAAAwAgT1MvMj0gSRsAAAEoAAAAVmNtYXDnEOdVAAABiAAAADZnbHlm7/npHAAAAcgAAAEwaGVhZBKtDIMAAADQAAAANmhoZWEHmQNrAAAArAAAACRobXR4B+gAAAAAAYAAAAAIbG9jYQCYAAAAAAHAAAAABm1heHABDgB0AAABCAAAACBuYW1lxmFdywAAAvgAAAIxcG9zdDwSCicAAAUsAAAANwABAAADUv9qAFoEAAAA//4D6gABAAAAAAAAAAAAAAAAAAAAAgABAAAAAQAAMLNyX18PPPUACwPoAAAAANfSY9oAAAAA19Jj2gAAAAAD6gPqAAAACAACAAAAAAAAAAEAAAACAGgAAgAAAAAAAgAAAAoACgAAAP8AAAAAAAAAAQP0AZAABQAAAnoCvAAAAIwCegK8AAAB4AAxAQIAAAIABQMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUGZFZABA5wDnAANS/2oAWgPqAJYAAAABAAAAAAAABAAAAAPoAAAAAAACAAAAAwAAABQAAwABAAAAFAAEACIAAAAEAAQAAQAA5wD//wAA5wD//wAAAAEABAAAAAEAAAAAAAAAmAAAAAIAAAAAA+oD6gALAGcAAAEOAQcuASc+ATceAQEVBgcnJiIPAQYUHwEOAQcjIgYdAR4BOwEWFwcGFB8BFjI/AR4BFxUeATsBPgE9ATY3FxYyPwE2NC8BPgE3MzI2PQE0JisBJic3NjQvASYiDwEuASc1LgEnIw4BAr4CcVVUcQMDcVRVcf7pOTRbBRQGUQYGWhAYB30LDgEPCX0OIVoHB1EFFQVbGTYeAQ4KcQsOOTRbBRQGUQYGWhAXB34LDQ8Jfg4gWgcHUQUVBVsZNh4BDgpxCQ8B9lRxAwNxVFVxAgJxAYd+DiBaBgZRBRUFWBk2Hg8KcQsOOTRbBxQHUQYGWhAYB30LDgEPCX0OIVoGBk4FFQVbGTYeDwpxCw06NFoIEwhRBgZaEBgHfQsNAQENAAAAABIA3gABAAAAAAAAAAEAAAABAAAAAAABAAgAAQABAAAAAAACAAcACQABAAAAAAADAAgAEAABAAAAAAAEAAgAGAABAAAAAAAFAAsAIAABAAAAAAAGAAgAKwABAAAAAAAKACwAMwABAAAAAAALABIAXwADAAEECQAAAAIAcQADAAEECQABABAAcwADAAEECQACAA4AgwADAAEECQADABAAkQADAAEECQAEABAAoQADAAEECQAFABYAsQADAAEECQAGABAAxwADAAEECQAKAFgA1wADAAEECQALACQBLyBzZXR0aW5nc1JlZ3VsYXJzZXR0aW5nc3NldHRpbmdzVmVyc2lvbiAxLjBzZXR0aW5nc0ZvbnQgZ2VuZXJhdGVkIHVzaW5nIFN5bmNmdXNpb24gTWV0cm8gU3R1ZGlvd3d3LnN5bmNmdXNpb24uY29tACAAcwBlAHQAdABpAG4AZwBzAFIAZQBnAHUAbABhAHIAcwBlAHQAdABpAG4AZwBzAHMAZQB0AHQAaQBuAGcAcwBWAGUAcgBzAGkAbwBuACAAMQAuADAAcwBlAHQAdABpAG4AZwBzAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAHUAcwBpAG4AZwAgAFMAeQBuAGMAZgB1AHMAaQBvAG4AIABNAGUAdAByAG8AIABTAHQAdQBkAGkAbwB3AHcAdwAuAHMAeQBuAGMAZgB1AHMAaQBvAG4ALgBjAG8AbQAAAAACAAAAAAAAAAoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIBAgEDAA1zZXR0aW5ncy0tLTExAAAA) format('truetype');
font-weight: normal;
font-style: normal;
}

.e-btn-icons {
font-family: 'settings' !important;
speak: none;
font-size: 55px;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}


.e-setting-icon::before {
  content: "\e700";
}