Display

External Link

A link that opens in a new tab with the right rel, an icon and a screen reader hint, ready for table cells.

<script>
  import { ExternalLink } from "@codeatlasdev/ui";
</script>

<ExternalLink href="https://registrar.example/buy?d=atlas.dev">Buy at registrar</ExternalLink>

ExternalLink always sets target="_blank" with rel="noopener noreferrer", draws a trailing arrow icon (hidden from assistive technology) and appends a visually hidden “(opens in a new tab)” to the accessible name. The hint comes from the i18n catalog (externalLink.newTab), so it follows setLocale. Without it a screen reader user gets no warning that the link leaves the page.

A results table with a per-row external link needs nothing more than putting it in a cell. For links that look like buttons, use Button with href and target="_blank"; it already sets rel.

<script lang="ts">
  import { ExternalLink, SimpleTable, Card } from '@codeatlasdev/ui';

  const rows = [
    { domain: 'atlas.dev', price: '$12.00', url: 'https://registrar.example/buy?d=atlas.dev' },
    { domain: 'nimbus.io', price: '$38.00', url: 'https://registrar.example/buy?d=nimbus.io' },
    { domain: 'orbit.app', price: '$21.00', url: 'https://registrar.example/buy?d=orbit.app' },
  ];
</script>

<Card flush full>
  <SimpleTable responsive="cards">
    <thead>
      <tr><th>Domain</th><th>Price</th><th>Registrar</th></tr>
    </thead>
    <tbody>
      {#each rows as r (r.domain)}
        <tr>
          <td class="primary">{r.domain}</td>
          <td>{r.price}</td>
          <td><ExternalLink href={r.url}>Buy at registrar</ExternalLink></td>
        </tr>
      {/each}
    </tbody>
  </SimpleTable>
</Card>

Other anchor attributes (aria-label, data-*, onclick) are passed through. target and rel are fixed on purpose.