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 속성이 필요합니다. 선택적으로 primary (기본값), secondary, minimal로 설정할 수 있는 variant 속성을 사용하여 링크 버튼의 모양을 사용자 정의합니다.

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

<LinkButton href="/ko/getting-started/">시작하기</LinkButton>
<LinkButton href="/ko/reference/configuration/" variant="secondary">
	구성 참조
</LinkButton>

{% linkbutton href="/ko/getting-started/" %}시작하기{% /linkbutton %}

{% linkbutton href="/ko/reference/configuration/" variant="secondary" %}
구성 참조
{% /linkbutton %}

시작하기 구성 참조

링크 버튼에 아이콘 추가

Starlight의 내장 아이콘 중 하나의 이름으로 설정된 icon 속성을 사용하여 링크 버튼에 아이콘을 포함시킵니다.

텍스트 앞에 아이콘을 배치하기 위해 iconPlacement 속성을 start로 설정할 수 있습니다 (기본값은 end).

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

<LinkButton
	href="https://docs.astro.build/ko"
	variant="secondary"
	icon="external"
	iconPlacement="start"
>
	관련: Astro
</LinkButton>

{% linkbutton
   href="https://docs.astro.build/ko"
	 variant="secondary"
	 icon="external"
	 iconPlacement="start" %}
관련: Astro
{% /linkbutton %}

<LinkButton slot="preview" href="https://docs.astro.build/ko" 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의 기본 제공 아이콘 중 하나의 이름으로 설정된 icon 속성을 포함할 수 있습니다.

iconPlacement

타입: 'start' | 'end'
기본값: 'end'

링크 버튼 텍스트에 상대적인 아이콘의 위치를 결정합니다.