CheTextLink

テキストリンクコンポーネントです。インライン要素としてテキスト内にリンクを配置できます。

• 遷移に使用する
• アイコンなしの場合、アンダーラインは必須
• アイコンありの場合、アンダーラインなしでも可

基本

<CheTextLink href="https://example.com">テキストリンク</CheTextLink>

サイズ

size でフォントサイズを指定できます。デフォルトは "16" です。

<CheTextLink href="#" size="16">テキストリンク</CheTextLink>
<CheTextLink href="#" size="14">テキストリンク</CheTextLink>
<CheTextLink href="#" size="12">テキストリンク</CheTextLink>

アイコン

iconOptions でアイコンを付与できます。アイコンありの場合、デフォルトの下線は表示されません。

prefix

テキストの前にアイコンを配置します。

<CheTextLink
  href="#"
  iconOptions={{ position: "prefix", name: "search", size: 4.5 }}
>
  テキストリンク
</CheTextLink>

suffix

テキストの後にアイコンを配置します。

<CheTextLink
  href="#"
  iconOptions={{ position: "suffix", name: "external-link", size: 4.5 }}
>
  テキストリンク
</CheTextLink>

すべてのバリエーション

すべてのパターンは カタログページ を参照してください。

Props

IconOptions