칩

태그, 레이블, 카테고리 등을 표시하는 칩 컴포넌트입니다.

SCSS
React
Svelte

Import

@use 'podo-ui/scss/atom/chip';

개요

칩은 작고 컴팩트한 요소로 태그, 카테고리, 상태 등을 표현할 때 사용됩니다.

HTML

<div class="chip">
  <i class="icon icon-ellipse"></i>
  레이블
</div>

<div class="chip blue">
  <i class="icon icon-ellipse"></i>
  레이블
</div>

<div class="chip green">
  <i class="icon icon-ellipse"></i>
  레이블
</div>

기본 예제

레이블

타입

칩은 세 가지 타입을 제공합니다: default (진한 배경), fill (옅은 배경), border (테두리만).

HTML

<!-- Default type -->
<div class="chip blue">
  <i class="icon icon-ellipse"></i>
  레이블
</div>

<!-- Fill type -->
<div class="chip fill blue">
  <i class="icon icon-ellipse"></i>
  레이블
</div>

<!-- Border type -->
<div class="chip border blue">
  <i class="icon icon-ellipse"></i>
  레이블
</div>

Default 타입 (진한 배경)

레이블

Fill 타입 (옅은 배경)

레이블

Border 타입 (테두리)

레이블

크기

칩은 sm (작은)과 md (기본) 크기를 지원합니다.

HTML

<div class="chip sm blue">작은 크기</div>
<div class="chip blue">기본 크기</div>

크기 비교

작은 크기

기본 크기

둥근 모서리

round 클래스를 추가하여 완전히 둥근 모서리를 만들 수 있습니다.

HTML

<!-- Default -->
<div class="chip blue">레이블</div>

<!-- Round -->
<div class="chip round blue">레이블</div>

round.comparison

기본 (약간 각진)

Round (완전히 둥근)

삭제 버튼

칩에 삭제 버튼을 추가하여 제거 기능을 제공할 수 있습니다.

HTML

<div class="chip blue">
  <i class="icon icon-ellipse"></i>
  레이블
  <button aria-label="삭제"></button>
</div>

삭제 버튼 포함

레이블

Podo UI

칩

Import

개요

타입

크기

둥근 모서리

삭제 버튼