Navigation

Link

A styled anchor/NuxtLink with active-state awareness and disabled support.

html

<UiLink />

To

to is an internal route renders as a NuxtLink and picks up active styling when it matches the current page; an absolute URL renders as a plain anchor.

Internal (active)Internal (inactive)External

Internal links (to starting with /) get automatic active-state styling when the current route matches; external links never do, regardless of to.

Target

target forces external anchor rendering and adds rel="noopener noreferrer" along with it.

Opens in a new tab

Color

color is the color theme of the link.

neutral primary secondary success error warning info pending

Underline

underline is hover by default. Use always for a link inside a block of prose, where it has to be findable without hovering, and none where the colour already marks it as a link.

Always underlined Underline on hover Never underlined

Disabled

disabled dims the link and stops it navigating. Prefer removing a link people can't use — a dimmed one still invites the click it won't honour — and reserve this for a link that's temporarily unavailable.

Disabled

disabled prevents navigation but still renders as an <a>/NuxtLink, just with pointer-events and styling disabled — same tradeoff as Button's to+disabled combination.

API Reference

Generated from the component's source — props, slots and emits as the component actually declares them.

Props

Prop

Type

Default

Description

to

string

—

The route or URL to navigate to. Internal routes render as a NuxtLink; external URLs (or when `target` is `_blank`) render as a plain anchor.

target

string

—

The target attribute for the link (e.g. '_blank'). Forces external anchor rendering and adds `rel="noopener noreferrer"`.

color

'primary'

The color theme of the link.

underline

"always" | "hover" | "none"

'hover'

Controls when the link is underlined.

disabled

boolean

false

Disables interaction with the link.

Slots

Slot

default

Types

type Color = "neutral" | "primary" | "secondary" | "success" | "error" | "warning" | "info" | "pending";