---
title: Overview
page_title: Button Overview - Components - Kendo UI for Vue
description: "Get an overview of the features the Kendo UI Button wrapper for Vue delivers and use the component in Vue projects."
slug: overview_button_wrapper
canonicalLink: "https://www.telerik.com/kendo-vue-ui/components/buttons/button/"
position: 1
---

<div><WrapperBanner link="/kendo-vue-ui/components/buttons/button"></WrapperBanner></div>

# Button Overview

The Button allows the user to achieve a UI functionality by clicking it.

You can configure the appearance of the Button to show only textual content, to display predefined icon, image, or custom icons, or a combination of textual and image content.

The Button wrapper for Vue is a client-side wrapper for the [Kendo UI Button](https://docs.telerik.com/kendo-ui/api/javascript/ui/button) widget.

<div data-component="StartFreeTrialSection"></div>

## Basic Usage

The following example demonstrates the Button in action.
{% meta height:250 %}
{% embed_file button/overview/basic-usage/main.vue preview %}
{% embed_file button/overview/basic-usage/main.js %}
{% endmeta %}

## Functionality and Features

* [Disabled Button]({% slug disabled_state_button_wrapper %})
* [Icon Button]({% slug icons_button_wrapper %})
* [Keyboard navigation]({% slug keyboard_navigation_button_wrapper %})
* [RTL support]({% slug right_to_left_support_button_wrapper %})

## Events

The following example demonstrates basic Button events. You can subscribe to [all Button events](https://docs.telerik.com/kendo-ui/api/javascript/ui/button#events) by the handler name.

{% meta height:250 %}
{% embed_file button/overview/events/main.vue preview %}
{% embed_file button/overview/events/main.js %}
{% endmeta %}

## Suggested Links

* [Kendo UI Button for jQuery](https://docs.telerik.com/kendo-ui/controls/navigation/button/overview)
* [API Reference of the Button Widget](https://docs.telerik.com/kendo-ui/api/javascript/ui/button)