Bileşenler

Link

Bir sayfaya ya da adrese giden bağlantı; metnin içinde ya da kendi satırında durur.

Storybook: Storybook
Kaynak kod: Kaynak kod

Ne zaman kullanılır

Link, kullanıcıyı başka bir sayfaya, bölüme ya da adrese götürmek içindir: metin içi başvurular, “Tümünü göster”, belgeler ve dış kaynaklar.

Ne zaman kullanılmaz

Bir işlem çalıştırmak için: Kaydetme, silme, açma gibi işlemler Button ile yapılır.
Yalnızca ikon gösterilecekse: İşlem için IconButton kullanın; bağlantının metni olmalıdır.
Bir bağlantıyı buton gibi göstermek için: Button’a render={<a href="..." />} verin.

Anatomi

Belgeler Belgeler

import { Link } from '@bigbang/ui';

export default function External() {
  return (
    <>
      <div className="flex flex-col items-start gap-md">
        <Link href="https://example.com" external>
          Belgeler
        </Link>
        <Link href="https://example.com" external variant="standalone">
          Belgeler
        </Link>
      </div>
    </>
  );
}

Metin: Bağlantının adı; color-text-link renginde.
Alt çizgi: Satır içi bağlantıda hep, bağımsızda üzerine gelince.
Dış bağlantı ikonu: Yalnızca external ile; süs amaçlıdır.
Görünmeyen not: “(yeni sekmede açılır)” ya da “(opens in a new tab)”; ekran okuyucu bağlantı adının sonunda okur.

Davranış

Link yerel bir <a href> çizer; Enter tuşu ve tıklama hedefe gider.
href denetlenir: göreli yollar ile https:, http:, mailto:, tel: korunur. javascript:, data:, vbscript: gibi şemalar kaldırılır ve bağlantı hedefsiz çizilir.
render, yönlendiricinin bağlantı bileşenini çizer; stiller ve adres denetimi yine uygulanır.
external yeni sekmeyi target="_blank" ve rel="noopener noreferrer" ile açar.

Yönergeler

Bağlantı metni nereye gittiğini söylesin: “Kullanım koşulları”. “Buraya tıklayın” ya da “devamı” yazmayın.
Metin içinde satır içi bağlantı kullanın; bağımsız bağlantıyı kartların ve listelerin sonunda kullanın.
Yeni sekmeyi yalnızca dış kaynaklar için açın; kullanıcının işini bölmeyin.
Aynı sayfada aynı metne farklı hedef vermeyin.

İçerik

Bağlantı metni kısa bir ad öbeğidir; tüm cümleyi bağlantı yapmayın.
Adresin kendisini metin olarak göstermeyin; okunur bir ad verin.

Türkçe	İngilizce
Tümünü göster	Show all
Kullanım koşulları	Terms of use
yeni sekmede açılır	opens in a new tab

İlgili bileşenler

Button: Bir işlem çalıştırır; gerektiğinde bağlantı olarak çizilir.
Text: Bağlantının içinde durduğu metin.
Icon: Dış bağlantı ikonu.