Preview
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';