テキストリンクTextLinkExperimental
本文中のリンクを表示し、新しいタブで開くリンクには外部リンクアイコンを自動で併記します。
プレビュー
状態とバリエーション
通常
同じサイト内や同じタブで移動する通常のテキストリンクです。外部タブアイコンは表示しません。
新しいタブ
target="_blank" のリンクには外部タブアイコンを必ず併記します。
控えめ
注釈や補足テキスト内で、本文になじませたいリンクに使います。
概要プレビュー付き
リンク先のタイトルや説明を HoverCard で合成するバリエーションです。タップでも概要を開き、カード内のボタンで遷移を確認できます。
プロパティ
表は横にスクロールできます
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| href | string | - | リンク先です。 |
| target | HTMLAttributeAnchorTarget | - | `_blank` の場合は外部タブアイコンを自動で表示します。 |
| variant | "default" | "muted" | "default" | 本文中の強調度に合わせた見た目です。 |
| external | boolean | false | 新しいタブではない外部リンクにも外部リンクアイコンを表示します。 |
| newTabLabel | string | "opens in a new tab" | 新しいタブで開くことを支援技術に伝える非表示の補足ラベルです。表示される説明が必要な場合は HoverCard や Tooltip と合成します。 |
| children | ReactNode | - | リンクテキストです。 |
使い方
import { TextLink, useToast } from "@gunjo/ui";
import type { MouseEvent } from "react";
export function Example() {
const { showToast } = useToast();
const handleNavigation = (event: MouseEvent<HTMLAnchorElement>) => {
event.preventDefault();
showToast("DocNote を見る（/docs/components/doc-note）への遷移をプレビュー内で確認しました。", "success", 1800);
};
return (
<TextLink href="/docs/components/doc-note" onClick={handleNavigation}>
DocNote を見る
</TextLink>
);
}