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.vue
<template>
<div>
    <ejs-button cssClass='e-block'>Block Button</ejs-button>
    <ejs-button cssClass='e-block' isPrimary=true>Block Button</ejs-button>
    <ejs-button cssClass='e-block e-success'>Block Button</ejs-button>
</div>
</template>

<script>
import Vue from 'vue';
import { ButtonPlugin } from '@syncfusion/ej2-vue-buttons';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);
Vue.use(ButtonPlugin);

export default {}
</script>

<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';

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

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 following code 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.vue
<template>
    <ejs-button cssClass='e-custom'>Custom</ejs-button>
</template>

<script>
import Vue from 'vue';
import { ButtonPlugin } from '@syncfusion/ej2-vue-buttons';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);
Vue.use(ButtonPlugin);

export default {}
</script>

<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';

.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;
}

button {
  margin: 25px 5px 20px 20px;
}
</style>

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 code snippet, 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
app.vue
<template>
<div>
    <div>
        <input type='button' value='Input Button' class='e-btn e-link' />
    </div>
    <br>
    <div>
        <a id='anchorbtn' class='e-btn e-primary' href='#'>Google</a>
    </div>
</div>
</template>

<script>
import Vue from 'vue';
import { ButtonPlugin } from '@syncfusion/ej2-vue-buttons';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);
Vue.use(ButtonPlugin);

export default {}
</script>

<style>
  @import '../node_modules/@syncfusion/ej2-base/styles/material.css';
  @import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
</style>

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.vue
<template>
    <div id='container'>
        <div class='btncontainer'>
            <ejs-button id='button' cssClass='e-small'>Button</ejs-button>
        </div>
        <div class='event' style='height:auto;'>
            <table title='Event Trace' style='width:100%'>
            <tbody>
            <tr>
                <th>Event Trace</th>
            </tr>
            <tr>
                <td>
                    <div class='eventarea' style='height: 250px;overflow: auto'>
                        <span id='eventlog' style='word-break: normal;'></span>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div class='evtbtn' style='padding:20px 0 0 20px'>
                        <ejs-button id='clear' cssClass='e-small'>Clear</ejs-button>
                    </div>
                </td>
            </tr>
        </tbody>
        </table>
        </div>
    </div>
</template>

<script>
import Vue from 'vue';
import { ButtonPlugin } from '@syncfusion/ej2-vue-buttons';
import { enableRipple, EventHandler } from '@syncfusion/ej2-base';

enableRipple(true);
Vue.use(ButtonPlugin);

export default {
  mounted () {
      var timeout;
    document.getElementById('clear').onclick = function () {
    document.getElementById('eventlog').innerHTML = '';
}

var button = document.getElementById('button');
button.addEventListener('mousedown', mouseDownHandler);
button.addEventListener('touchstart', mouseDownHandler);
button.addEventListener('mouseup', mouseUpHandler);
button.addEventListener('touchend', mouseUpHandler);
button.addEventListener('click', clickEventHandler);

function mouseUpHandler() {
    clearInterval(timeout);
}

function mouseDownHandler(event) {
    event.preventDefault();
    timeout = setInterval(clickEventHandler, 200);
}
function clickEventHandler() {
    EventHandler.trigger(button, 'click');
    appendSpanElement('Button click event triggered.<hr>');
}
function appendSpanElement(text) {
    var span = document.createElement('span');
    span.innerHTML = text;
    var log = document.getElementById('eventlog');
    log.insertBefore(span, log.firstChild);
}
  }
}
</script>

<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';

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

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

#eventlog b {
  color: #388e3c;
}

hr {
   margin: 1px 10px 1px 0px;
   border-top: 1px solid #eee;
}
</style>

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.vue
<template>
    <ejs-button disabled=true>Disabled</ejs-button>
</template>

<script>
import Vue from 'vue';
import { ButtonPlugin } from '@syncfusion/ej2-vue-buttons';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);
Vue.use(ButtonPlugin);

export default {}
</script>

<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';

button {
  margin: 25px 5px 20px 20px;
}
</style>

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.vue
<template>
    <ejs-button iconCss='e-icons e-setting-icon' enableRtl=true>Settings</ejs-button>
</template>

<script>
import Vue from 'vue';
import { ButtonPlugin } from '@syncfusion/ej2-vue-buttons';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);
Vue.use(ButtonPlugin);

export default {}
</script>

<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';

.e-setting-icon::before {
  content: '\e7cf';
}

button {
  margin: 25px 5px 20px 20px;
}
</style>

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.vue
<template>
    <ejs-button id='button' isPrimary=true>Button</ejs-button>
</template>

<script>
import Vue from 'vue';
import { ButtonPlugin } from '@syncfusion/ej2-vue-buttons';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);
Vue.use(ButtonPlugin);

export default {
  mounted () {
    document.getElementById('button').setAttribute('title', 'Primary Button');
  }
}
</script>

<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';

button {
  margin: 25px 5px 20px 20px;
}
</style>

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.vue
<template>
<ejs-button cssClass='e-round-corner'>Button</ejs-button>
</template>

<script>
import Vue from 'vue';
import { ButtonPlugin } from '@syncfusion/ej2-vue-buttons';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);
Vue.use(ButtonPlugin);

export default {}
</script>

<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';

.e-round-corner {
  border-radius: 5px;
}

button {
  margin: 25px 5px 20px 20px;
}
</style>