Create a block button in EJ2 TypeScript Button control

13 Jan 20243 minutes to read

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 thecssClass property toe-block.

import{Button}from'@syncfusion/ej2-buttons';import{enableRipple}from'@syncfusion/ej2-base';enableRipple(true);//Block Button.letbutton:Button=newButton({cssClass:`e-block`});button.appendTo('#blockbtn');//Primary Block Button.button=newButton({isPrimary:true,cssClass:`e-block`});button.appendTo('#primarybtn');//Success Block Button.button=newButton({cssClass:`e-block e-success`});button.appendTo('#successbtn');

<!DOCTYPE html><htmllang="en"><head><title>EJ2 Button</title><metacharset="utf-8"/><metaname="viewport"content="width=device-width, initial-scale=1.0"/><metaname="description"content="Typescript UI Controls"/><metaname="author"content="Syncfusion"/><linkhref="https://cdn.syncfusion.com/ej2/32.1.19/ej2-base/styles/material.css"rel="stylesheet"/><linkhref="https://cdn.syncfusion.com/ej2/32.1.19/ej2-buttons/styles/material.css"rel="stylesheet"/><linkhref="styles.css"rel="stylesheet"/><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script><scriptsrc="systemjs.config.js"></script><scriptsrc="https://cdn.syncfusion.com/ej2/syncfusion-helper.js"type="text/javascript"></script></head><body><divid='loader'>LOADING....</div><divid='container'><buttonid="blockbtn">Block Button</button><buttonid="primarybtn">Block Button</button><buttonid="successbtn">Block Button</button></div><script>letloader=document.getElementById('loader');letcontainer=document.getElementById('container');if(loader){loader.style.display="none";}if(container){container.style.visibility="visible";}</script></body></html>

#container{visibility:hidden;}#loader{color:#008cff;height:40px;left:45%;position:absolute;top:45%;width:30%;}button{margin:25px0;}