Link

Navigasyon için stillenmiş bir <a>: metnin içinde ya da listelerde ve footer'larda tek başına. Sonuç yeni bir yere gitmek değil de bir aksiyonsa Button kullan.

KararlıKaynak kod

Başlamadan önce kurulum rehberini oku.

<Text>
Başlamadan önce <Link href="/tr/docs/installation">kurulum rehberini</Link> oku.
</Text>

Import

tsx

import { Link } from "@merid/react";

Örnekler

Tonlar

accent (varsayılan) akan metnin içindeki linkler içindir. ink ve muted daha sakindir; her öğenin link olduğu navigasyon listeleri ve footer'lar için uygundur.

Accent Ink Muted

<Link href="#" tone="accent">Accent</Link>
<Link href="#" tone="ink">Ink</Link>
<Link href="#" tone="muted">Muted</Link>

Alt çizgi

hover (varsayılan) alt çizgiyi hover ve focus'ta gösterir. Link renkten bağımsız olarak da ayırt edilebilmeliyse always kullan, örneğin muted renkli bir paragrafın içinde.

Hover'da altı çizili Her zaman altı çizili Alt çizgi yok

<Link href="#" underline="hover">Hover'da altı çizili</Link>
<Link href="#" underline="always">Her zaman altı çizili</Link>
<Link href="#" underline="none">Alt çizgi yok</Link>

Harici link

external linki yeni bir tab'da açar, rel="noopener noreferrer" ekler ve ekran okuyucu kullanıcıları uyarılsın diye görsel olarak gizli bir “(opens in a new tab)” metni ekler.

GitHub reposu

<Link href="https://github.com/ahmetcantryk/merid" external>
GitHub reposu
</Link>

Client-side router ile

asChild ver ve router'ının link component'ini tek child olarak geçir: Merid'in link stilini alır, kendi davranışını korur. Bu server component'lerde de çalışır.

tsx

import NextLink from "next/link";

<Link asChild tone="accent">
  <NextLink href="/pricing">Fiyatlandırma</NextLink>
</Link>

API referansı

Ref'ini <a>'ya iletir ve tüm native anchor attribute'larını olduğu gibi geçirir. external verildiğinde target ve rel'i ezer.

Prop	Tip	Varsayılan	Açıklama
`tone`	`"accent" \| "ink" \| "muted"`	`"accent"`	Metin rengi.
`underline`	`"hover" \| "always" \| "none"`	`"hover"`	Alt çizginin ne zaman görüneceği.
`external`	`boolean`	`false`	Linki rel="noopener noreferrer" ile yeni bir tab'da açar ve görsel olarak gizli bir uyarı metni ekler.
`href`	`string`	–	Native link hedefi.
`asChild`	`boolean`	`false`	Bir `<a>` yerine tek child elemanı (örneğin bir router linki) link stiliyle render'lar.

Stil verme

Seçici	Değerler
`.mrd-link`	Kök `<a>`
`data-tone`	`accent` · `ink` · `muted`
`data-underline`	`hover` · `always` · `none`

Link'in kendine ait component değişkeni yok; --mrd-accent, --mrd-accent-hover, --mrd-ink ve --mrd-muted token'larını okur.

Erişilebilirlik

Native bir <a> render'lar: Enter linke gider ve link, ekran okuyucunun link listesinde görünür.
Link metni bağlamından koparıldığında da anlamlı olmalı: “buraya tıkla” değil, “Fiyatlandırma rehberini oku”.
external yeni tab uyarısını ekler; yeni tab'ları tek başına target="_blank" ile sessizce açma.

Tuş	Ne yapar
`Tab`	Focus'u linke taşır.
`Enter`	Linke gider.

Kullanım ilkeleri

Yap

Kullanıcıyı bir yere götüren şey için Link, bir şey yapan şey için Button kullan.

Kaçın

Bir aksiyonu tetiklemek için href="#" olan bir linke onClick bağlamak.

Yap

Muted ya da yoğun metnin içindeki linklerin altını çiz; yalnızca renkle ayırt edilmesinler.

Kaçın

Akan metnin içindeki linklerde underline="none" kullanmak.

İlgili sayfalar

Button: link varyantı link gibi görünür ama bir aksiyon çalıştırır.
VisuallyHidden: harici link uyarısının arkasındaki yardımcı component.