Link

Storybook Source

Navigation element for inline text or adjacent content.

Usage

button and link (<a>) HTML elements each describe a specific intent. Understanding the distinction is important: if it goes somewhere, use a Link. If an action occurs, use a Button.

Do

  • Use for navigating between destinations.

Don’t

  • Use for actions, instead use a Button.

Best Practices

  • Use useful, actionable, and descriptive text clearly conveying the hyperlink's destination. For example, a generic label like "click here" doesn't convey its target content.
  • Too many links can be overwhelming. Be selective about the number of links in a context.
  • Clearly identify links that target an external source.

Accessibility

  • Allow keyboard navigation. Users must be able to navigate between links, i.e. keypress of tab, and activate it by pressing 'Enter'.
  • Users must be able to identify links without relying on color alone.
  • Users must be able to activate hover and focus states with both a mouse and a keyboard.

Variants and Examples

Default

No underline

This inverts the underline behavior. With underline="false", the link will not have an underline by default, but will show one on hover.

Inverted

In place of the inverted prop, use the v-dt-mode directive on the component element.

Navigation

DtLink supports both external links and internal SPA navigation via Vue Router.

href

Use href for standard anchor links — external URLs, hash links, etc.

to

Use to for Vue Router navigation. DtLink renders as a <router-link> when to is provided.

Replace history

Use the replace prop to replace the current history entry instead of pushing a new one. Only applies when to is provided.

Vue API 

import { DtLink } from '@dialpad/dialtone-vue';

Slots

Name
Type
default

Slot for main content

Props

Name
Default
Type
href
null
string

URL for anchor link navigation. Renders as a native element.

replace
false
"true" | "false"

When true, navigation replaces the current history entry instead of pushing. Only applies when to is provided.

to
null
string|object

Vue Router destination. Renders as a <router -link>. Takes precedence over href when both are provided.

tone
''
"null" | "critical" | "warning" | "positive" | "info" | "muted" | "mention" | "unstyled"

Applies the link variant styles

underline
true
"true" | "false"

Determines whether the link should display an underline.

inverted Deprecated
 false
"true" | "false"

Determines whether the link should have inverted styling default is false.

Use v-dt-mode directive instead.

kind Deprecated
string

Use tone

Classes

Class
Applies to
Description

Link documentation last updated Friday, September 4, 2026

fix/popover-modal-zindex-scope