リンク

ページ間のナビゲーションのためのセマンティック要素。

ソースコードを見る問題を報告する Playgroundで確認

サインアップ

<Link href="#">Sign up</Link>

APIリファレンス

このコンポーネントはa要素に基づいており、一般的なマージンプロパティをサポートしています。

プロパティ	型	デフォルト値
`asChild`	`boolean`	デフォルト値なし
`size`	`Responsive<enum>`	デフォルト値なし
`weight`	`Responsive<"light" \| "regular" \| "medium" \| "bold">`	デフォルト値なし
`trim`	`Responsive<"normal" \| "start" \| "end" \| "both">`	デフォルト値なし
`truncate`	`boolean`	デフォルト値なし
`wrap`	`Responsive<"wrap" \| "nowrap" \| "pretty" \| "balance">`	デフォルト値なし
`underline`	`"auto" \| "always" \| "hover" \| "none"`	`"auto"`
`color`	`enum`	デフォルト値なし
`highContrast`	`boolean`	デフォルト値なし

例

サイズ

sizeプロパティを使用して、リンクのサイズを制御します。このプロパティは、正しい行高と補正文字間隔も提供します。テキストサイズが大きくなるにつれて、相対的な行高と文字間隔は小さくなります。

サインアップサインアップサインアップサインアップサインアップサインアップサインアップサインアップサインアップ

<Flex direction="column" gap="3">
  <Link href="#" size="1">
    Sign up
  </Link>
  <Link href="#" size="2">
    Sign up
  </Link>
  <Link href="#" size="3">
    Sign up
  </Link>
  <Link href="#" size="4">
    Sign up
  </Link>
  <Link href="#" size="5">
    Sign up
  </Link>
  <Link href="#" size="6">
    Sign up
  </Link>
  <Link href="#" size="7">
    Sign up
  </Link>
  <Link href="#" size="8">
    Sign up
  </Link>
  <Link href="#" size="9">
    Sign up
  </Link>
</Flex>

ウェイト

weightプロパティを使用して、テキストのウェイトを設定します。

サインアップサインアップサインアップ

<Flex direction="column">
  <Link href="#" weight="regular">
    Sign up
  </Link>
  <Link href="#" weight="medium">
    Sign up
  </Link>
  <Link href="#" weight="bold">
    Sign up
  </Link>
</Flex>

切り詰め

truncateプロパティを使用して、テキストがコンテナからはみ出した場合に省略記号で切り詰めます。

ニュースレターにサインアップ

<Flex maxWidth="150px">
  <Link href="#" truncate>
    Sign up to the newsletter
  </Link>
</Flex>

色

colorプロパティを使用して、特定の色を割り当てます。

サインアップサインアップサインアップサインアップ

<Flex direction="column">
  <Link href="#" color="indigo">
    Sign up
  </Link>
  <Link href="#" color="cyan">
    Sign up
  </Link>
  <Link href="#" color="orange">
    Sign up
  </Link>
  <Link href="#" color="crimson">
    Sign up
  </Link>
</Flex>

高コントラスト

highContrastプロパティを使用して、背景との色のコントラストを高めます。

サインアップサインアップ

<Flex direction="column">
  <Link href="#" color="gray">
    Sign up
  </Link>
  <Link href="#" color="gray" highContrast>
    Sign up
  </Link>
</Flex>

下線

underlineプロパティを使用して、下線のアフォーダンスの表示を管理します。

サインアップサインアップ

<Flex direction="column">
  <Link href="#" underline="hover">
    Sign up
  </Link>
  <Link href="#" underline="always">
    Sign up
  </Link>
</Flex>

前へKbd

次へQuote

GitHubでこのページを編集する。

概要

テーマ

レイアウト

タイポグラフィ

コンポーネント

ユーティリティ

リンク