칩
필터·토글·선택 칩이에요. 켜진 색은 파랑(brand) 아니면 검정(ink)이에요.
플랫폼
폰 브라우저·홈 화면 앱(767px 이하)고르기#
이 부품을 언제 쓰고, 언제 다른 것을 쓰는지예요.
언제 쓰나#
- 필터·토글·선택 칩. 켜짐은 파랑(brand) 아니면 검정(ink).
사용 예제#
할 일마다 실물과 코드예요. 편집을 누르면 코드를 고쳐 바로 볼 수 있어요.
값 바꿔 보기#
해부도#
- 1
컨테이너
알약 모양 버튼이에요. 꺼지면 회색 면이에요.
- 2
라벨
고르는 값의 이름이에요.
- 3
지우기
onRemove를 주면 생겨요.
속성#
인터페이스#
타입에서 자동으로 뽑은 표예요.
Chip#
| 속성 | 기본값 | 타입 | 설명 |
|---|---|---|---|
| active | - | boolean | 골랐는지예요. 주면 aria-pressed로 알려요. |
| tone | 'ink' | 'ink' | 'brand' | 'up' | 'down' | 색의 뜻이에요. |
| size | 'md' | 'sm' | 'md' | md = 필터·선택 칩(t-cap) · sm = 차트 보조지표처럼 촘촘한 켜고 끄기(t-micro, 옛 Toggle) - 2026-11-13 정리 2단계 |
| count | - | ReactNode | 칩 안 개수(구간 칩의 단지 수 등) - 켜지면 글자색을 따라 옅게 |
| onColor | - | string | 켰을 때 채움 색을 뜻 색으로(이평선 색·기준금리 등, 옛 Toggle onColor) - 글자는 흰색 |
| onClick | - | () => void | 누르면 불러요. |
| onRemove | - | () => void | |
| removeLabel | - | string | 지우기 버튼의 이름(aria-label) - 없으면 글자 칩은 '<글자> 지우기' |
| title | - | string | 마우스를 올리면 뜨는 설명이에요. label이 없으면 이름으로도 써요. |
| className | - | string | 배치용 클래스예요. 모양(색·크기)은 덮어쓰지 않아요. |
| expanded | - | boolean | 칩이 팝오버·펼침을 여는 버튼일 때 - aria-expanded로 열림 상태를 알린다(운영 대시보드 '연결 4/5'). |
| children* | - | ReactNode | 안에 그릴 내용이에요. |
* 필수예요. 표는 타입에서 자동으로 뽑았어요.
스펙#
상태 · 슬롯마다 실제로 그려지는 값이에요.
Chip#
base
| 상태 | 슬롯 | 속성 | 값 |
|---|---|---|---|
| enabled | root | 간격 | 4px |
| 줄바꿈 | 안 함 | ||
| 모서리 | 완전 원(9999px) | ||
| 굵기 | 700 | ||
| 전환 대상 | 색·눌림 크기 | ||
| remove | 모서리 | 완전 원(9999px) | |
| remove-icon | 크기 | 14px | |
| enabled · 폰(767px 이하) | remove-icon | 크기 | 16px |
| pressed | root | 크기 배율(기본) | 0.975 · 버튼 공통 규칙 |
| remove | 크기 배율(기본) | 0.975 · 버튼 공통 규칙 |
size=sm
| 상태 | 슬롯 | 속성 | 값 |
|---|---|---|---|
| enabled | root | 좌우 여백 | 8px |
| 위아래 여백 | 4px | ||
| 글자 크기 | t-micro | ||
| enabled · 폰(767px 이하) | root | 좌우 여백 | 10px |
| 위아래 여백 | 6px |
size=md
| 상태 | 슬롯 | 속성 | 값 |
|---|---|---|---|
| enabled | root | 좌우 여백 | 10px |
| 위아래 여백 | 4px | ||
| 글자 크기 | t-cap | ||
| enabled · 폰(767px 이하) | root | 좌우 여백 | 12px |
| 위아래 여백 | 6px |
active=true, onColor=true
| 상태 | 슬롯 | 속성 | 값 |
|---|---|---|---|
| enabled | root | 글자색 | #ffffff |
onColor=false, active=true, tone=brand
| 상태 | 슬롯 | 속성 | 값 |
|---|---|---|---|
| enabled | root | 배경색 | brand-soft |
| 글자색 | brand-ink |
값은 컴포넌트 코드에서 뽑았고, 토큰 이름을 누르면 파운데이션으로 가요. 토큰이 없는 값만 숫자로 적었어요.
접근성#
역할과 속성#
| 요소 | 역할 · 속성 |
|---|---|
| Chip | button(type="button") |
| active | aria-pressed(줬을 때만) |
| expanded | aria-expanded · aria-haspopup="dialog" |
| 지우기 ✕ | button · aria-label="<글자> 지우기"(removeLabel로 바꿔요) |
키보드#
| 키 | 동작 |
|---|---|
| Tab | 칩 → 지우기 ✕ → 다음 칩 |
| Enter · Space | 켜고 꺼요(✕에서는 지워요) |
| Delete · Backspace | 칩에서 바로 지워요 |
화면 읽기 프로그램#
- active를 넘긴 칩은 "눌림 · 안 눌림"으로 읽혀요.
- 지우기 ✕는 따로 초점을 받는 버튼이고, 이름은 "<글자> 지우기"예요. 지우면 초점이 옆 칩으로 가요.
초점#
- 폰에서는 보이는 크기는 그대로 두고 누르는 면만 4px씩 넓혀요.
가이드라인#
언제 쓰나요#
- 여러 조건 중 일부를 켜고 끌 때.
- 고른 조건을 지울 수 있게 보여 줄 때(onRemove).
이렇게 써요#
쓰는 규칙#
이렇게 써요
- 선택은 tone="brand", 모드 전환처럼 강한 선택은 tone="ink"를 써요.
- 지우기 ✕는 onRemove로 칩 안에 넣어요.
이렇게 하지 않아요
- 회색 채움으로 선택을 표시하지 않아요.
- 등락 뜻이 아닐 때 up·down 색을 쓰지 않아요.
문구#
- 값 이름만 짧게 적어요("서초구").
- 조건은 사람 말로 적어요("1,000세대 이상").
플랫폼별 차이#
| 플랫폼 | 차이 |
|---|---|
| 모바일 | 767px 이하에서 누르는 칸과 여백이 커져요(손가락 기준). |
| PC | 마우스가 있는 기기에서만 hover가 켜지고, 키보드 초점 링이 보여요. |