Link

A pill-shaped link with an icon that says whether the destination opens here or in a new tab.

import { Link } from '@/components/custom/link'

export default function LinkDemo() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Link href="/components/link" label="View in this tab" />
      <Link href="https://ui.shadcn.com" label="Open shadcn docs" newPage />
    </div>
  )
}

Installation

pnpm dlx shadcn@latest add https://kiotapay-ui-staging.staging.kiotapay.com/r/link.json

npx shadcn@latest add https://kiotapay-ui-staging.staging.kiotapay.com/r/link.json

yarn dlx shadcn@latest add https://kiotapay-ui-staging.staging.kiotapay.com/r/link.json

bunx --bun shadcn@latest add https://kiotapay-ui-staging.staging.kiotapay.com/r/link.json

Usage

import { Link } from '@/components/custom/link'

export function PolicyLinks() {
  return (
    <>
      <Link href="/leave/policy" label="Leave policy" />
      <Link href="https://kiotapay.com/terms" label="Terms of service" newPage />
    </>
  )
}

Props

Extends React.ComponentProps<typeof NextLink> minus href and children.

Prop	Type	Default	Description
`href`	`string`	—	Destination. Required.
`label`	`string`	—	Visible text. Required.
`newPage`	`boolean`	`false`	Opens in a new tab and swaps to the external icon.
`className`	`string`	—	Merged into the pill.

This exports a component named Link, which collides with next/link if both are imported into the same file. Alias one of them: import NextLink from 'next/link'.

Behaviour notes

The icon is the point. Telling someone a click leaves the app before they click it is the whole reason for the trailing glyph — an in-page arrow versus an external-window arrow is the cheapest version of that signal.

newPage implies rel="noopener noreferrer". Without noopener, the opened tab receives a window.opener handle on yours and can navigate it anywhere.