Components
Chip
네 맥락을 한 어휘로 덮는 pill.
슈게이즈
import { Chip } from '@coldsurfers/surf-ui/primitives'import { useState } from 'react'const FILTERS = ['오늘', '이번 주', '이번 달']export default function Example() { const [picked, setPicked] = useState('오늘') return ( <> {FILTERS.map((label) => ( <Chip key={label} active={picked === label} onClick={() => setPicked(label)}> {label} </Chip> ))} <Chip size="lg" active> 공연 </Chip> <Chip size="lg">전시</Chip> <Chip as="span" size="sm"> 슈게이즈 </Chip> </> )}quick chip · section chip · filter · genre 태그가 전부 이 하나입니다.
상호작용이면 기본 button, 라벨이면 as="span", 라우팅 링크면 asChild 입니다.
size="lg" 는 시안 v3 v3/Chip 입니다. 테두리 없는 회색 알약(38)이고 주제 · 동네를 고르는 줄에 씁니다.
active 의 시각 언어는 여기가 정본이다
선택된 칩은 잉크 바탕 + 흰 글자입니다(selectedFill · selectedText). 2026-09-28 부터 accent 파랑이
정본이었는데, 시안 v3(Figma 1455:250)가 파랑을 주 행동 하나에만 남기면서 2026-10-17 에 잉크로 돌아왔습니다.
필터 칩은 링크여야 한다
필터된 면이 색인되려면 크롤 가능한 <a href> 여야 합니다. 그래서 필터 맥락의 기본 사용법은
asChild 입니다.
<Chip asChild active={picked === '오늘'}>
<Link to="?when=today">오늘</Link>
</Chip>Props
Prop
Type