Link popup

A table link that opens related detail in a shared popup window, so the list keeps its place.

Refined portWildLinkPopup.vueWLinkPopup

Try it

Click a last sent date, then another, and watch both open in the same window.

Alarm	Last sent
High pressure	Tue Sep 29 2026, opens in a new window
Low tank level	Mon Sep 28 2026, opens in a new window
Logger offline	Fri Sep 25 2026, opens in a new window

Disabled

<WildLinkPopup
  :text="dateFormatter(params)"
  :link="formatHistoryLink(params)"
  title="Alarm history"
/>

When to use

Use it for a table value, such as an alarm’s last sent date, that opens related detail in its own window.
Use it when the list should keep its filters and scroll while the detail is open.

Don’t use it

For a change that fits in a few fields. Use a dialog or a drawer.
For a short explanation. Use a tooltip.
To move to another page. Use a plain link.

States

Hover underlines the text. Use disabled for viewers without edit rights, so it shows as plain text.

Tue Sep 29 2026, opens in a new window

rest

Tue Sep 29 2026, opens in a new window

hover

Tue Sep 29 2026, opens in a new window

focus

Tue Sep 29 2026

disabled

Tue Sep 29 2026, opens in a new window

truncated

<WildLinkPopup :text="dateFormatter(params)" :link="formatHistoryLink(params)" title="Alarm history" />
<WildLinkPopup :text="dateFormatter(params)" :link="formatHistoryLink(params)" title="Alarm history" disabled />

Text too long for its cell ends in an ellipsis, and hovering it shows the full text.

Content

Use the value the cell already shows, such as a date, as the text. Don’t write Open or View.
Use one title for links that should share a window, such as alarm history. Use a different title to open a separate window.
Put the words that tell rows apart first, because long text is cut off at the end.

Accessibility

It’s a link, and a screen reader hears its text followed by “opens in a new window”. A disabled one is plain text and leaves the tab order.

Key	What it does
Tab	Moves focus to the link.
Enter	Opens the link in a 960 × 640 window.
Ctrl / Cmd + Enter	Opens it in a new tab instead.
Shift + Enter	Opens it in a new browser window.

Props

Prop	Type	Default	Description
text	string	—	The words shown, such as a formatted date.
link	string	—	The address the window opens.
title	string	—	The window’s name. The same name reuses the same window.
disabled	boolean	false	Plain text, with no link and no tab stop.
state	'rest' \| 'hover' \| 'focus'	—	Pins a state for static examples. Omit for live use.
style	CSSProperties	—	Inline styles on the link or plain text.

Tokens

Token	Value	Where it lands
--global-blue-1000	#1877F2	Link text, on white grounds.
--global-neutral-grey-1100	#2D2B32	Disabled text.
--font-weight-bold	600	Text weight.
--color-primary-active	#1877F2	Keyboard focus ring, outside a 2px gap.
(no token)	960 × 640	Window size.