CellLink

A table-cell link whose host decides how to open it.

VerifiedSince 0.3.9

Usage

Basic

underline picks a permanent or hover-only underline; a click only emits open and never navigates.

Loading demo...

Best Practices

When the text is a bare domain, add an ariaLabel such as "Open the Aurora Scoops website".
Use muted with underline="hover" for record-name columns, and the default color with underline="always" for link columns.
In the Electron renderer, route open through the host's external-browser channel; don't open windows in the renderer.
Render a placeholder such as — for a cell with no link, not a TxCellLink with an empty href.

API Reference

Props

Prop	Type	Default	Description
`href`	`string`	-	Target URL, written into the real `href`.
`label`	`string`	`href`	Visible text; falls back to `href`.
`external`	`boolean`	`false`	Appends the outbound arrow.
`muted`	`boolean`	`false`	Uses the secondary ink instead of the link color, for record-name columns.
`underline`	`'always' \| 'hover'`	`'hover'`	`hover` shows it on hover and focus only; `always` keeps a tinted underline.
`ariaLabel`	`string`	-	Accessible name when the visible text doesn't describe the destination.

Events

Event	Payload	Description
`open`	`({ href, event })`	Fires on click after `preventDefault()`; the host navigates.

Slots

Name	Description
`default`	Replaces the link text.

Overview

Renders a native <a href>, so copy-link, hover preview, and the context menu work, and Enter fires open too.
Never navigates on its own: in the Electron renderer, a self-navigating link would take the app window with it. Same contract as TxSources.
The outbound arrow is aria-hidden; put the destination in ariaLabel.
Long text truncates with an ellipsis instead of widening the cell.

Technologies

Source: packages/tuffex/packages/components/src/cell-link/.
Adapted from Beautiful UI (© 2026 Shane Levine, MIT); upstream navigates directly, this port emits open instead.

packages/tuffex/packages/components/src/cell-link/index.ts