Add link to a button in EJ2 TypeScript Button control

13 Jan 20242 minutes to read

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.

index.ts
index.html
styles.css
import { Button } from '@syncfusion/ej2-buttons';
import { enableRipple} from '@syncfusion/ej2-base';

enableRipple(true);

// Initialize the Button component.
let button: Button = new Button({cssClass: 'e-link'});

// Render initialized button.
button.appendTo('#element');

button.element.onclick = (): void => {
    window.open("https://www.google.com");
}
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Button</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="styles.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>LOADING....</div>
    <div id='container'>
        <button id='element'>Go to Google</button>
    </div>
</body>

</html>
#container {
    visibility: hidden;
}

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