El Link

Link Component

Link component provides text hyperlinks with various styles and icon support.

When to Use

• Text navigation
• External links
• Inline links
• Icon links

Basic Usage

<template>
  <el-link href="https://element-plus.org" target="_blank">default</el-link>
  <el-link type="primary">primary</el-link>
  <el-link type="success">success</el-link>
  <el-link type="warning">warning</el-link>
  <el-link type="danger">danger</el-link>
  <el-link type="info">info</el-link>
</template>

Disabled

<template>
  <el-link disabled>disabled</el-link>
</template>

Underline

<template>
  <el-link underline="always">Always Underlined</el-link>
  <el-link underline="hover">Underline on Hover</el-link>
  <el-link underline="never">Never Underlined</el-link>
</template>

With Icon

<template>
  <el-link :icon="Link">Icon Link</el-link>
  <el-link>
    <el-icon class="el-icon--left"><Link /></el-icon>
    Icon on Left
  </el-link>
</template>

<script setup>
import { Link } from '@element-plus/icons-vue'
</script>

API Reference

Attributes

Slots

Best Practices

1. Validate URLs to prevent XSS vulnerabilities
2. Use underline="hover" for better UX
3. Use target="_blank" for external links