Link

Text hyperlink

Basic

Basic text link

Disabled

Disabled state of link

Underline

Controlling when underlines should appear

WARNING

The boolean value has been deprecated, and will be removed in 3.0.0 , consider switching to new values.

TIP

Starting from 2.9.9 , you can use 'always' | 'hover' | 'never' to control when underlines should appear. The examples in the document all use these values. If you are using a version less than 2.9.9 , please refer to:

vue
<template>
  <!-- works before 2.9.9, use 'hover' after, removed in 3.0.0 -->
  <el-link underline>link</el-link>
  <!-- works before 2.9.9, use 'never' after, removed in 3.0.0 -->
  <el-link :underline="false">link</el-link>
</template>

Icon

Link with icon

TIP

Use the icon attribute to add icon. You can pass either string for the component name (registered in advance) or the component itself which is a SVG Vue component. Element Plus has provided a set of icon that you can find at icon

API

Attributes

NameDescriptionTypeDefault
typetypeenumdefault
underlinewhen underlines should appearenumhover
disabledwhether the component is disabledbooleanfalse
hrefsame as native hyperlink's hrefstring
targetsame as native hyperlink's targetenum_self
iconicon componentstring / Component

Slots

NameDescription
defaultcustomize default content
iconcustomize icon component

Source

ComponentStyleDocs

Contributors