Ocean Road
가이드
컴포넌트
가이드
컴포넌트

Badge

태그/필터 형태의 배지 컴포넌트입니다. 클릭 가능한 항목 선택 UI에 주로 사용합니다.

사용법

import { Badge } from '@coldsurfers/ocean-road'

<Badge onClick={() => {}}>라이브</Badge>

// 하이라이트 상태
<Badge isHighlighted onClick={() => {}}>선택됨</Badge>

// 아이콘 포함
<Badge leftIcon="Music" onClick={() => {}}>음악</Badge>

Props

prop 타입 기본값 설명
children string | ReactElement — 배지 내용
isHighlighted boolean — true이면 강조 배경색을 적용합니다.
leftIcon keyof Icons — 텍스트 왼쪽에 표시될 lucide-react 아이콘 이름
onClick () => void — 클릭 핸들러

인터랙티브 데모

ON THIS PAGE