컨텐츠로 건너뛰기
Starlight

배지

상태나 카테고리와 같은 작은 정보를 표시하려면 <Badge> 컴포넌트를 사용합니다.

미리보기
새 항목

가져오기

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

사용

<Badge> 컴포넌트를 사용하여 배지를 표시하고 표시할 콘텐츠를 <Badge> 컴포넌트의 text 속성에 전달합니다.

기본적으로 배지는 사이트의 테마 강조 색상을 사용합니다. 기본적으로 제공되는 배지 색상을 사용하려면 variant 속성을 지원되는 값 중 하나로 설정하세요.

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


<Badge text="노트" variant="note" />
<Badge text="성공" variant="success" />
<Badge text="팁" variant="tip" />
<Badge text="주의" variant="caution" />
<Badge text="위험" variant="danger" />
미리보기
노트 성공 팁 주의 위험

다른 크기 사용

size 속성을 사용하여 배지 텍스트의 크기를 조절할 수 있습니다.

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


<Badge text="새 항목" size="small" />
<Badge text="개선된 새 항목" size="medium" />
<Badge text="더 큰 개선된 새 항목" size="large" />
미리보기
새 항목 개선된 새 항목 더 큰 개선된 새 항목

배지 사용자 정의

class 또는 style과 같은 다른 <span> 속성을 사용자 정의 CSS와 함께 사용하여 배지를 사용자 정의합니다.

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


<Badge text="사용자 정의" variant="success" style={{ fontStyle: 'italic' }} />
미리보기
사용자 정의

<Badge> 속성

구현: Badge.astro

<Badge> 컴포넌트는 다음 속성과 기타 <span> 속성도 허용합니다:

text

필수
타입: string

배지에 표시할 텍스트 콘텐츠입니다.

variant

타입: 'note' | 'danger' | 'success' | 'caution' | 'tip' | 'default'
기본값: 'default'

사용할 배지 색상 변형: note (파란색), tip (보라색), danger (빨간색), caution (오렌지색), success (초록색), default (테마 강조 색상).

size

타입: 'small' | 'medium' | 'large'

표시할 배지의 크기를 정의합니다.