사용법
크기 조정하기
Badge 컴포넌트의 크기를 변경하려면 size 속성을 사용하세요. xsmall, small, medium, large 중 하나를 선택할 수 있어요.
xsmallsmallmediumlarge
스타일
Badge 컴포넌트의 스타일을 설정하려면 variant 속성을 사용하세요. 선택할 수 있는 값에는 fill과 weak이 있어요. 이때 color 속성으로 원하는 색상을 설정할 수 있어요.
fill
fill 스타일은 채도가 높아 시각적으로 강렬하고 눈에 띄는 디자인이라 주요 항목을 강조하는 데 적합해요.
BadgeBadgeBadgeBadgeBadgeBadge
weak
weak 스타일은 채도가 낮아서 시각적으로 덜 눈에 띄어요.
BadgeBadgeBadgeBadgeBadgeBadge
커스텀 스타일
className, style, CSS 변수로 variant 기본값을 덮어쓸 수 있어요.
CustomclassName
스타일 커스터마이징
Badge 사용 시 className, style로 모든 스타일을 변경할 수 있어요. CSS 변수는 컴포넌트 루트에 지정하면 variant 기본값을 덮어써요.
className / style
<Badge
className="shadow-md"
style={{
--gtd-badge-bg: "#059669",
}}
/>CSS 변수
| 변수 | 설명 |
|---|---|
| --gtd-badge-bg | 배경색 |
| --gtd-badge-color | 글자색 |
| --gtd-badge-radius | 모서리 반경 |
| --gtd-badge-font-size | 글자 크기 |
인터페이스
BadgeProps
| 속성 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| variant* | "fill" | "weak" | — | Badge 컴포넌트의 색상과 투명도 정보예요. |
| size* | "xsmall" | "small" | "medium" | "large" | — | Badge 컴포넌트의 크기예요. |
| color* | "blue" | "teal" | "green" | "red" | "yellow" | "elephant" | — | Badge 컴포넌트의 색상이에요. |
| className | string | — | 루트 요소 클래스. Tailwind·커스텀 CSS 적용 |
| style | CSSProperties | — | 인라인 스타일·CSS 변수(--gtd-*) 오버라이드 |
Badge 컴포넌트 Props 표
가져오기
import { Badge } from "@/components/ui/Badge";