---
title: "CellLink"
description: "A table-cell link whose host decides how to open it."
category: Data
status: beta
since: 0.3.9
tags: [link, table, cell, data]
syncStatus: reviewed
verified: true
---

## Usage

### Basic
`underline` picks a permanent or hover-only underline; a click only emits `open` and never navigates.
:::TuffDemoWrapper{demo="CellLinkCellLinkDemo" code-lang="vue"}
---
code: |
  <script setup lang="ts">
  function onOpen({ href }) {
    // The component never navigates. Open a tab on the web; hand off to the system browser on desktop.
    window.open(href, '_blank', 'noopener,noreferrer')
  }
  </script>

  <template>
    <TxCellLink href="https://aurora-scoops.example" label="Aurora Scoops" muted @open="onOpen" />
    <TxCellLink href="https://kumo-creamery.example" label="kumo-creamery.example" underline="always" @open="onOpen" />
    <TxCellLink href="https://maple-orbit.example" label="maple-orbit.example" external @open="onOpen" />
  </template>
---
:::

### 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](https://www.beautifului.dev) (© 2026 Shane Levine, MIT); upstream navigates directly, this port emits `open` instead.

<TuffDocSourceLink />