リンクボタン
視覚的に目立つコールトゥアクションリンクを表示するには、<LinkButton>
コンポーネントを使用します。
インポート
使用方法
<LinkButton>
コンポーネントを使用して、視覚的に目立つコールトゥアクションリンクを表示します。
リンクボタンは、ユーザーを最も関連性の高いコンテンツやアクションにつなげるために便利で、ランディングページなどでよく使用されます。
<LinkButton>
にはhref
属性が必要です。
オプションとして、variant
属性を使用して、ボタンの外観をカスタマイズできます。variant
属性にはprimary
(デフォルト)、secondary
、minimal
のいずれかを指定できます。
リンクボタンにアイコンを追加する
icon
属性を使用して、リンクボタンにアイコンを追加できます。これは、Starlightの組み込みアイコンの名前を指定します。
iconPlacement
属性を使用すると、アイコンをテキストの前に配置することができ、デフォルトではend
(後ろ)ですが、start
(前)に設定できます。
import { LinkButton } from '@astrojs/starlight/components';
<LinkButton href="https://docs.astro.build/ja/" variant="secondary" icon="external" iconPlacement="start"> Astroに関連するドキュメント</LinkButton>
{% linkbutton href="https://docs.astro.build/ja/" variant="secondary" icon="external" iconPlacement="start" %}Astroに関連するドキュメント{% /linkbutton %}
<LinkButton>
プロパティ
実装: LinkButton.astro
<LinkButton>
コンポーネントは以下のプロパティを受け付け、他の<a>
要素の属性も使用できます。
href
必須
型: string
リンクボタンが指すURL。
variant
型: 'primary' | 'secondary' | 'minimal'
デフォルト: 'primary'
リンクボタンの外観。
primary
はテーマのアクセントカラーを使用して目立つコールトゥアクションリンクを作成し、secondary
はそれほど目立たないリンク、minimal
は最小限のスタイルのリンクを作成します。
icon
型: string
リンクボタンにアイコンを含めるための属性。これはStarlightの組み込みアイコンの名前を指定します。
iconPlacement
型: 'start' | 'end'
デフォルト: 'end'
アイコンの配置をテキストの前後どちらにするかを指定します。