Skip to content
SHINSEGAE V UI

ColorChipButton

컬러 칩 버튼 컴포넌트입니다. 상품의 색상 옵션 선택 등에 사용됩니다.

Astro

---
import ColorChipButton from "@shared/ui/color-chip-button/ColorChipButton.astro";
---


<!-- 이미지 타입 -->
<ColorChipButton src="/path/to/color-image.png" name="레드" />


<!-- HEX 컬러 타입 -->
<ColorChipButton colorType="hex" colorCode="#ff0000" name="레드" />


<!-- 선택된 상태 -->
<ColorChipButton colorCode="#000000" name="블랙" pressed />


<!-- 품절 상태 -->
<ColorChipButton colorCode="#ffffff" name="화이트" soldout />

Props:

  • src?: string: 컬러 이미지 소스
  • colorType?: "img" | "hex": 컬러 표시 타입 (default: "img")
  • colorCode?: string: HEX 컬러 코드 (예: #ff0000)
  • name?: string: 컬러 이름
  • alt?: string: 대체 텍스트
  • pressed?: boolean: 선택 상태
  • disabled?: boolean: 비활성화 상태
  • soldout?: boolean: 품절 상태
  • command?: string: 커맨드 속성

Code

<!-- 이미지 타입 -->
<button type="button" class="v-color-chip">
  <img src="/path/to/color-image.png" alt="레드" />
</button>


<!-- HEX 컬러 타입 -->
<button type="button" class="v-color-chip">
  <span class="v-color-chip__hex" style="background-color: #ff0000;">레드</span>
</button>


<!-- 선택된 상태 -->
<button type="button" class="v-color-chip" aria-pressed="true">
  <span class="v-color-chip__hex" style="background-color: #000000;">블랙</span>
</button>


<!-- 밝은 색상 (테두리 추가) -->
<button type="button" class="v-color-chip v-color-chip--light">
  <span class="v-color-chip__hex" style="background-color: #ffffff;">화이트</span>
</button>


<!-- 품절 상태 -->
<button type="button" class="v-color-chip is-sold-out">
  <img src="/path/to/color-image.png" alt="품절" />
</button>

Preview