Link
A component used to display hyperlinks.
Basic Usage
Usually, we use it just like an <a> tag.
WARNING
The href property will be passed directly to the <a> tag. If a value like javascript:alert(1) or a malicious URL is passed, it may lead to XSS or open redirect vulnerabilities.
Link Themes
The link offers various themes: 'primary' (default), 'success', 'warning', 'danger', 'info', 'sakura' and 'notice'.
Underline
Links have two style variants: 'underline' (default) and 'normal'.
Disabled Status
disabled indicates that the link is disabled; the browser's default click-to-navigate behavior will not be triggered.
Loading Status
loading indicates whether the link is in a loading state; while loading, the browser's default click-to-navigate behavior will not be triggered.
Custom Color
Custom primary color: similar to the button component, the component will generate a complete color palette based on it, and this palette takes precedence over the preset palettes provided by theme. See Supported Color Parsing.
API
LinkProps
| Attribute | Type | Optional | Default | Description | Version |
|---|---|---|---|---|---|
| disabled | boolean | True | | Whether the link is disabled. | 0.0.0-beta |
| loading | boolean | True | | Whether the link is in a loading state. | 0.0.0-beta |
| theme | 'primary' | 'sakura' | 'success' | 'warning' | 'danger' | 'info' | 'notice' | True | 'primary' | Link theme. | 0.0.0-beta |
| theme | 'normal' | 'underline' | True | 'underline' | Link theme. | 0.1.0 |
| color | string | True | | Custom primary color. See Supported Color Parsing. | 0.0.0-beta |
| href | string | True | | Native HTML <a> href attribute. | 0.0.0-beta |
| target | string | True | | Native HTML <a> target attribute. | 0.0.0-beta |
LinkSlots
| Slot | Parameter | Description | Version |
|---|---|---|---|
| default | | The link's content. | 0.0.0-beta |
| icon | | The link's icon. | 0.0.0-beta |
LinkEvents
| Event | Parameter | Description | Version |
|---|---|---|---|
| click | e: MouseEvent | 0.0.0-beta |