How to use `ElButton` as a link using Element Plus and Vue.js

Question

I'm using Element Plus 2.2.28 and Vue.js 3.2.45.

I want to have a button like this:

<el-button>Contact</el-button>

When I click the button, I want it to behave like a link tag using mailto:[email protected].

I tried this:

<el-button href="mailto:[email protected]">Contact</el-button>

However, this doesn't work.

I could use pure JS in the @click event of the button, but I understand this is not recommended.

Answer 1

Since you want to click on the button to redirect you, then you do not need any other functionality that the el-button offers. As such, you only want the appearance of an el-button. Therefore, you can use the el-button class instead on an anchor tag as follows;

<a class="el-button" href="mailto:[email protected]">Contact</a>