Chip

원본: projects/skill-lens/design/components/Chip/README.md

상태: Stable, 접근성 ✓, 다크 ✓, 코드 ✗

태그, 레벨, 상태(단어 병기)

견본만 새 창으로

짧은 분류와 레벨 표시입니다. 크기는 8판 .tag(13 600, 안쪽 4 9, 알약).

쓰는 곳

스킬 종류, 레벨, 표와 행 안의 짧은 분류.

구성(화면이 넘겨줄 것)

짧은 라벨(8자 안팎).

규칙

• brand는 연보라 바탕 + 보라 글자, neutral은 회색, danger는 산호 옅은 바탕 + 진한 산호, plain은 바탕 없음.
• level, kind는 작은 보조 표기.
• 진행 상태는 StatusBadge, 누르는 필터는 Tabs.

접근성

• 색만이 아니라 단어를 함께 씁니다.

견본 코드

AI 읽기 도구는 위 견본(iframe)을 그리지 못하므로 같은 견본의 HTML을 글로 둔다. 스타일은 bundle.css, 값은 tokens.css.

<!-- @dsCard group="Display" height=170 subtitle="태그, 레벨, 상태(단어 병기)" -->
<style>body{margin:0;padding:var(--space-4);background:var(--surface-sunken)}.stack{display:flex;flex-direction:column;gap:var(--space-4)}.wrap{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center}.cap{font:500 12px/16px var(--font-sans);color:var(--ink-muted)}.card{padding:var(--space-4);background:var(--surface-raised);border-radius:var(--radius-lg);box-shadow:var(--shadow-card)}</style>
<div class="sl stack">

<div class="wrap"><span class="sl-chip sl-chip--brand">리더십</span><span class="sl-chip sl-chip--neutral">전체 보기</span><span class="sl-chip sl-chip--level">Lv 3</span></div>
<div class="wrap"><span class="sl-chip sl-chip--success">완료</span><span class="sl-chip sl-chip--warning">진행 중</span><span class="sl-chip sl-chip--danger">확인 필요</span></div>
</div>

이 사이트는 ideber 저장소 projects/skill-lens/ 에서 자동으로 만들어집니다. 고칠 때는 저장소를 고칩니다. 공개 주소이지만 검색엔진에는 나오지 않습니다.