InfoButton

정보/도움말 버튼 컴포넌트입니다. 물음표 아이콘이 표시됩니다.

Astro

---
import InfoButton from "@shared/ui/info-button/InfoButton.astro";
---

<InfoButton />
<InfoButton title="배송비 안내" />

Props:

• Button 컴포넌트의 모든 props 지원
• v-button--info 클래스가 자동으로 추가됩니다.

Code

<button type="button" class="v-button v-button--info">
  <svg viewBox="0 0 16 16" class="v-icon v-icon_info">
    <circle cx="8" cy="8" r="7.5"></circle>
    <path d="M7.83 10.75c.38 0 .66.27.66.63 0 .35-.28.62-.66.62-.37 0-.66-.27-.66-.62 0-.36.29-.63.66-.63ZM8.03 4c1.46 0 2.47.85 2.47 1.98 0 .86-.47 1.46-1.21 1.88-.74.41-.95.72-.95 1.3v.35H7.32V9c0-.73.37-1.22 1.16-1.67.68-.38.94-.73.94-1.3v-.01c0-.69-.57-1.18-1.43-1.18-.87 0-1.41.49-1.49 1.22v.05h-1v-.07C5.6 4.93 6.4 4 8.05 4Z"></path>
  </svg>
</button>

Preview

배송비