칩 (Chip)

Usage

1import { Chip } from "podo-ui/react";2import "podo-ui/styles.css";3
4{/* 클릭하면 스스로 선택/해제 토글 — selected로 제어형 전환 */}5<Chip defaultSelected>Label</Chip>

크기 (size)

칩은 사용 화면의 정보 밀도와 중요도에 따라 md(base), lg로 구분해 사용해요. md는 공간이 제한적이거나 칩이 보조적인 역할을 할 때 적합해요. 테이블 셀 안, 리스트 아이템 내부, 인풋 필드 안에 선택값이 쌓이는 멀티 셀렉트 등 밀도가 높은 UI에서 콘텐츠와 균형을 맞출 때 쓰이고, lg는 클릭 영역이 충분해 터치 환경 및 레이블이 명확하게 읽혀야 하는 필터·카테고리 선택·태그 입력 등 주요 인터랙션 맥락에 써요.

테마 (theme)

칩 테마는 배경 대비와 강조 정도에 따라 solid, outline-strong, outline-weak로 구분해요. solid는 진한 배경으로 선택·활성 상태를 뚜렷하게 강조할 때, outline-strong는 한 단계 낮은 대비로 여러 칩이 함께 놓여 보조적으로 쓰일 때, outline-weak는 밝은 배경에 얇은 외곽선으로 주변과 자연스럽게 어울려야 할 때 사용해요. 맥락에 맞는 테마를 선택하면 칩의 위계가 분명해지고 화면 전체의 강약이 정돈돼요.

상태 (state)

칩 상태는 선택 여부와 사용자의 조작 단계에 따라 unselected, unselected-pressed, selected, selected-pressed, disabled로 구분해 표현해요. unselected는 아직 선택되지 않은 기본 상태, selected는 선택·활성된 상태를 나타내고, 각 pressed는 누르는 순간의 피드백을 줘요. disabled는 지금 조작할 수 없는 비활성 상태를 낮은 대비로 구분해요. 선택·미선택과 눌림 피드백을 뚜렷하게 나눠, 사용자가 어떤 칩이 켜져 있고 지금 어떤 반응이 일어나는지 즉각 인지하게 해요.

제거형 (removable)

제거형 칩은 선택·해제를 오가는 토글이 아니라, 이미 선택된 값을 표시하고 지우는 용도로 사용해요. onRemove를 지정하면 칩이 선택된 모습으로 고정되고 X 버튼이 붙으며, 칩 본체는 눌리지 않고 X 클릭만 콜백을 불러요. 멀티 셀렉트의 선택 값 칩처럼 필터·태그 목록에서 값을 담아두고 하나씩 걷어낼 때 적합해요.

응용 (composition)

칩은 레이블의 의미를 보조하기 위해 prefix-icon, suffix-icon을 조합해 구성해요. prefix-icon은 카테고리나 상태를 상징하는 아이콘을 레이블 앞에 두어 종류를 빠르게 식별하게 할 때, suffix-icon은 삭제(close)처럼 칩 자체를 제거하는 동작을 레이블 뒤에서 제공할 때 사용해요. 목적에 맞게 조합하면 칩의 역할이 분명해지고 불필요한 안내 없이도 조작 방법을 직관적으로 전달할 수 있어요.

속성 (props)

podo-ui/react의 Chip이 받는 속성이에요. pressed 계열은 누르는 동안(:active) 자동으로 표현되고, 선택 여부만 selected로 제어해요. 이 밖에 표준 button 속성(className, type, aria-* 등)도 그대로 전달돼요.