link-buttons.mdx

title	description
リンクボタン	視覚的に目立つコールトゥアクションリンクをStarlightで作成する方法を学びましょう。

import { LinkButton } from '@astrojs/starlight/components';

視覚的に目立つコールトゥアクションリンクを表示するには、<LinkButton>コンポーネントを使用します。

import Preview from '~/components/component-preview.astro';

ドキュメントを読む

インポート

import { LinkButton } from '@astrojs/starlight/components';

使用方法

<LinkButton>コンポーネントを使用して、視覚的に目立つコールトゥアクションリンクを表示します。 リンクボタンは、ユーザーを最も関連性の高いコンテンツやアクションにつなげるために便利で、ランディングページなどでよく使用されます。

<LinkButton>にはhref属性が必要です。 オプションとして、variant属性を使用して、ボタンの外観をカスタマイズできます。variant属性にはprimary（デフォルト）、secondary、minimalのいずれかを指定できます。

import { LinkButton } from '@astrojs/starlight/components';

<LinkButton href="/ja/getting-started/">始めましょう</LinkButton>
<LinkButton href="/ja/reference/configuration/" variant="secondary">
	設定リファレンス
</LinkButton>

{% linkbutton href="/ja/getting-started/" %}始めましょう{% /linkbutton %}

{% linkbutton href="/ja/reference/configuration/" variant="secondary" %}
設定リファレンス
{% /linkbutton %}

始めましょう 設定リファレンス

リンクボタンにアイコンを追加する

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 slot="preview" href="https://docs.astro.build/ja/" variant="secondary" icon="external" iconPlacement="start"

Astroに関連するドキュメント

<LinkButton> プロパティ

実装: LinkButton.astro

<LinkButton>コンポーネントは以下のプロパティを受け付け、他の<a>要素の属性も使用できます。

href

必須
型: string

リンクボタンが指すURL。

variant

型: 'primary' | 'secondary' | 'minimal'
デフォルト: 'primary'

リンクボタンの外観。 primaryはテーマのアクセントカラーを使用して目立つコールトゥアクションリンクを作成し、secondaryはそれほど目立たないリンク、minimalは最小限のスタイルのリンクを作成します。

icon

型: string

リンクボタンにアイコンを含めるための属性。これはStarlightの組み込みアイコンの名前を指定します。

iconPlacement

型: 'start' | 'end'
デフォルト: 'end'

アイコンの配置をテキストの前後どちらにするかを指定します。