Components / New
Chip
A compact, pressable choice for filters and interests. Several can be on at once, and each one shows its own state.필터와 관심사를 위한 작고 누를 수 있는 선택지입니다. 여러 개를 동시에 켤 수 있고, 각각의 상태를 스스로 보여 줍니다.
Interest filter관심사 필터
Selected chips turn black with a lime check, so things come together at a glance.선택된 칩은 검정 바탕에 라임 체크로 바뀌어, 고른 것들이 한눈에 모입니다.
1 selected1개 선택됨
Anatomy구조
- 1Container컨테이너
Pill shape, 36px tall (30px small). Outline when off, solid when on.pill 형태, 높이 36px(작은 크기 30px). 꺼짐은 외곽선, 켜짐은 채움.
- 2Check체크
Appears only when selected, so state never relies on color alone.선택되었을 때만 나타나, 색에만 의존하지 않고 상태를 전합니다.
- 3Label레이블
One or two words. Never truncate.한두 단어. 말줄임하지 않습니다.
Markup
<div role="group" aria-label="Interests">
<button class="dy-chip" aria-pressed="true">Life</button>
<button class="dy-chip" aria-pressed="false">Wellness</button>
<button class="dy-chip small" aria-pressed="false">Bio</button>
</div><div role="group" aria-label="관심사">
<button class="dy-chip" aria-pressed="true">라이프</button>
<button class="dy-chip" aria-pressed="false">웰니스</button>
<button class="dy-chip small" aria-pressed="false">바이오</button>
</div>Usage사용 가이드
Let chips wrap칩은 줄바꿈으로
Let chips wrap onto new lines so every option stays visible and readable.칩이 다음 줄로 넘어가게 해 모든 선택지가 보이고 읽히도록 합니다.
Don't truncate labels or hide options in a scroll strip without any hint.레이블을 말줄임하거나 아무 단서 없이 가로 스크롤 안에 선택지를 숨기지 않습니다.
Chips choose, buttons act칩은 선택, 버튼은 실행
Use chips for toggling filters or interests. The page updates in place.필터나 관심사를 켜고 끄는 데 칩을 씁니다. 화면은 제자리에서 바뀝니다.
Don't use a chip to submit, navigate, or trigger a one-off action. Use a Button.제출, 이동, 일회성 실행에 칩을 쓰지 않습니다. 버튼을 사용합니다.
Chip, Badge, or Button?Chip, Badge, Button 구분
| Component구성 요소 | Interaction상호작용 | Example예시 |
|---|---|---|
| Chip | Toggles on and off (aria-pressed)켜고 끔 (aria-pressed) | Interest filters관심사 필터 |
| Badge | None (describes status)없음 (상태 설명) | Done, New완료, 신규 |
| Button | Runs an action once행동을 한 번 실행 | Save, Connect저장하기, 연결하기 |