배지

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

미리보기

새 항목

가져오기

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

사용

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

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

MDX

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" />

Markdoc

- {% badge text="노트" variant="note" /%}
- {% badge text="성공" variant="success" /%}
- {% badge text="팁" variant="tip" /%}
- {% badge text="주의" variant="caution" /%}
- {% badge text="위험" variant="danger" /%}

미리보기

• 노트
• 성공
• 팁
• 주의
• 위험

다른 크기 사용

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

MDX

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

- <Badge text="새 항목" size="small" />
- <Badge text="개선된 새 항목" size="medium" />
- <Badge text="더 큰 개선된 새 항목" size="large" />

Markdoc

- {% badge text="새 항목" size="small" /%}
- {% badge text="개선된 새 항목" size="medium" /%}
- {% badge text="더 큰 개선된 새 항목" size="large" /%}

미리보기

• 새 항목
• 개선된 새 항목
• 더 큰 개선된 새 항목

배지 사용자 정의

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

MDX

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

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

Markdoc

{% badge text="사용자 정의" variant="success" style="font-style: 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'

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