e8-link
Updated on Sep 18, 2025 11 minutes to readA versatile link component that can behave as a standard hyperlink or trigger custom events, with optional badge styling, pill shape, active state, and disabled state.
Overview
e8-link provides a flexible way to render hyperlinks or interactive link-like elements.
It supports standard href navigation, click event callbacks, badge styling, pill-shaped badges, and alert link styles.
The component also handles active and disabled states, making it suitable for use in navigation menus, tag-like badges, or alerts.
<e8-link
href="https://example.com"
target="_blank"
variant="success"
class="mr-2"
>
Visit Example
</e8-link>
<e8-link
badge
variant="danger"
pill
@click="$notify('clicked')"
class="mr-2"
>
Notifications
</e8-link>
<e8-link
alert-link
disabled
>
Disabled Alert
</e8-link>Properties
| Property | Description | Type | Default |
|---|---|---|---|
| active | Sets the link to an active state. | boolean | false |
| alert-link | Applies alert-link styling to the link. | boolean | false |
| badge | Renders the link as a badge. | boolean | false |
| disabled | Disables the link and prevents click events. | boolean | false |
| href | Standard URL for the link. | string | null |
| pill | If true, the badge has a pill shape. | boolean | true |
| target | Target attribute for the link (e.g., _self, _blank). | string | '_self' |
| variant | Color variant of the badge. | E8BadgeColorVariants | 'primary' |
Slots
| Slot | Description |
|---|---|
| default | The content of the link, such as text, icons, or other HTML elements. |
Events
| Slot | Description |
|---|---|
| on-click | Triggers when the link is clicked. |