Button

Performs an action when clicked

Usage

<template>
  <winui-button @click="handleClick">Click me!</winui-button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      alert("Hello, world!");
    },
  },
};
</script>

Props

Tip

The Button component inherits all attributes and events from <button> (opens new window)

Customization

Use the class name .winui-button to override/customize the component's styles.

There is also a default state available with the button that you can use by adding the class .default to the button.

Examples

Disabled state

<template>
  <winui-button disabled>You can't click me!</winui-button>
</template>

Default state

<template>
  <winui-button class="default">Default button</winui-button>
</template>

Handling the hover state

Hello

<template>
  <div>
    <winui-button @mouseover="handleMouseover" @mouseout="handleMouseout">
      Hover me!
    </winui-button>
    <span>{{ isHovered ? "Xin chào" : "Hello" }}</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isHovered: false,
    };
  },
  methods: {
    handleMouseover() {
      this.isHovered = true;
    },
    handleMouseout() {
      this.isHovered = false;
    },
  },
};
</script>