Vue UI Components Documentation

Enables or disables the button.

<template>
  <JqxButton ref="myButton"
    :width="120" :height="40" :value="'Click Me!'" :disabled="true"
  />
</template>
 
<script>
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
 
  export default {
    components: {
      JqxButton
    }
  }
</script>

Sets or gets the button's height.

<template>
  <JqxButton ref="myButton"
    :width="120" :height="40" :value="'Click Me!'"
  />
</template>
 
<script>
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
 
  export default {
    components: {
      JqxButton
    }
  }
</script>

Sets or gets the button's image source.

<template>
  <JqxButton ref="myButton"
    :width="120" :height="40" :value="'Click Me!'" :imgPosition="'left'" :imgSrc="'https://jqwidgets.com/jquery-widgets-demo/images/andrew.png'"
    :imgHeight="14" :imgWidth="14"
  />
</template>
 
<script>
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
 
  export default {
    components: {
      JqxButton
    }
  }
</script>

Sets or gets the button's image width.

<template>
  <JqxButton ref="myButton"
    :width="120" :height="40" :value="'Click Me!'" :imgPosition="'left'" :imgSrc="'https://jqwidgets.com/jquery-widgets-demo/images/andrew.png'"
    :imgHeight="14" :imgWidth="14"
  />
</template>
 
<script>
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
 
  export default {
    components: {
      JqxButton
    }
  }
</script>

Sets or gets the button's image height.

<template>
  <JqxButton ref="myButton"
    :width="120" :height="40" :value="'Click Me!'" :imgPosition="'left'" :imgSrc="'https://jqwidgets.com/jquery-widgets-demo/images/andrew.png'"
    :imgHeight="14" :imgWidth="14"
  />
</template>
 
<script>
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
 
  export default {
    components: {
      JqxButton
    }
  }
</script>

Sets or gets the button's image position. Possible values: "left", "top", "center", "bottom", "right", "topLeft", "bottomLeft", "topRight", "bottomRight".

<template>
  <JqxButton ref="myButton"
    :width="120" :height="40" :value="'Click Me!'" :imgPosition="'left'" :imgSrc="'https://jqwidgets.com/jquery-widgets-demo/images/andrew.png'"
  />
</template>
 
<script>
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
 
  export default {
    components: {
      JqxButton
    }
  }
</script>

Enables or disables the rounded corners functionality. This property setting has effect in browsers which support CSS border-radius.

'all' - for all corners

'top'- for top corners

'bottom' - for bottom corners

'left' - for left corners

'right' - for right corners

'top-right' - for top right corners

'top-left' - for top left corners

'bottom-right' - for bottom right corners

'bottom-left' - for bottom left corners

<template>
  <JqxButton ref="myButton"
    :width="120" :height="40" :value="'Click Me!'" :roundedCorners="'top'"
  />
</template>
 
<script>
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
 
  export default {
    components: {
      JqxButton
    }
  }
</script>

Sets or gets a value indicating whether widget's elements are aligned to support locales using right-to-left fonts.

<template>
  <JqxButton ref="myButton"
    :width="120" :height="40" :value="'Click Me!'" :rtl="true"
  />
</template>
 
<script>
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
 
  export default {
    components: {
      JqxButton
    }
  }
</script>

Sets or gets the button's text position. Possible values: "left", "top", "center", "bottom", "right", "topLeft", "bottomLeft", "topRight", "bottomRight".

<template>
  <JqxButton ref="myButton"
    :width="120" :height="40" :value="'Click Me!'" :textPosition="'right'"
  />
</template>
 
<script>
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
 
  export default {
    components: {
      JqxButton
    }
  }
</script>

Sets or gets the button's text image relation. Possible values: "imageBeforeText", "imageAboveText", "textAboveImage", "textBeforeImage" and "overlay".

<template>
  <JqxButton ref="myButton"
    :width="120" :height="40" :value="'Click Me!'" :imgPosition="'left'" :imgSrc="'https://jqwidgets.com/jquery-widgets-demo/images/andrew.png'"
    :textImageRelation="'imageBeforeText'"
  />
</template>
 
<script>
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
 
  export default {
    components: {
      JqxButton
    }
  }
</script>

Sets the widget's theme.

• Include the theme's CSS file after jqx.base.css.
  The following code example adds the 'material' theme.

  
  <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
  <link rel="stylesheet" href="../../jqwidgets/styles/jqx.material.css" type="text/css" />
  
  

• Set the widget's theme property to 'material' when you initialize it.

<template>
  <JqxButton ref="myButton"
    :width="120" :height="40" :value="'Click Me!'" :theme="'material'"
  />
</template>
 
<script>
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
 
  export default {
    components: {
      JqxButton
    }
  }
</script>

Determines the button's template as an alternative of the default styles.

'default' - the default button's template. The button's style depends only on its "theme" property value.

'primary' - dark blue button for extra visual weight.

'success' - green button for successful or positive action.

'warning' - orange button which indicates caution.

'danger' - red button which indicates a dangerous or negative action.

'inverse' - dark gray button, not tied to a semantic action or use.

'info' - blue button, not tied to a semantic action or use.

'link' - making it look like a link .

<template>
  <JqxButton ref="myButton"
    :width="120" :height="40" :value="'Click Me!'" :template="'success'"
  />
</template>
 
<script>
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
 
  export default {
    components: {
      JqxButton
    }
  }
</script>

Sets ot gets the button's width.

<template>
  <JqxButton ref="myButton"
    :width="240" :height="40" :value="'Click Me!'"
  />
</template>
 
<script>
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
 
  export default {
    components: {
      JqxButton
    }
  }
</script>

Sets or gets the button's value.

<template>
  <JqxButton ref="myButton"
    :width="120" :height="40" :value="'Button'"
  />
</template>
 
<script>
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
 
  export default {
    components: {
      JqxButton
    }
  }
</script>

This event is triggered when the button is clicked.

Code examples

Bind to the click event of jqxButton.

<template>
  <JqxButton ref="myButton" @click="onClick($event)"
    :width="120" :height="40" :value="'Click Me!'"
  />
</template>
 
<script>
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
 
  export default {
    components: {
      JqxButton
    },
    methods: {
      onClick: function (event) {
        alert('do something...');
      }
    }
  }
</script>

Destroys the widget.

<template>
  <JqxButton ref="myButton"
    :width="120" :height="40" :value="'Click Me!'"
  />
</template>
 
<script>
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
 
  export default {
    components: {
      JqxButton
    },
    mounted: function () {
      this.$refs.myButton.destroy();
    }
  }
</script>

Focuses the widget.

<template>
  <JqxButton ref="myButton"
    :width="120" :height="40" :value="'Click Me!'"
  />
</template>
 
<script>
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
 
  export default {
    components: {
      JqxButton
    },
    mounted: function () {
      this.$refs.myButton.focus();
    }
  }
</script>

Renders the widget.

<template>
  <JqxButton ref="myButton"
    :width="120" :height="40" :value="'Click Me!'"
  />
</template>
 
<script>
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
 
  export default {
    components: {
      JqxButton
    },
    mounted: function () {
      this.$refs.myButton.render();
    }
  }
</script>

Sets or gets the value.

<template>
  <JqxButton ref="myButton"
    :width="120" :height="40" :value="'Click Me!'"
  />
</template>
 
<script>
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
 
  export default {
    components: {
      JqxButton
    },
    mounted: function () {
      const value = this.$refs.myButton.val('New Text');
    }
  }
</script>