UI 가이드

다크 모드

ScBadge ​

ScBadge 컴포넌트는 버튼이나 아이콘 등에 알림 개수 또는 표시용 점(badge)을 렌더링할 때 사용합니다. 숫자형/문자열 값 또는 단순 점(badge) 형태 모두 지원합니다.

✅ 기본 사용법 ​

new
3
99+
3
9+
new
vue
<div>
  <sc-badge value="new">
    <sc-button>comments</sc-button>
  </sc-badge>

  <sc-badge value="3">
    <sc-button>replies</sc-button>
  </sc-badge>

  <sc-badge value="99+">
    <sc-button>notices</sc-button>
  </sc-badge>
</div>

<div class="mt-5">
  <sc-badge value="3">
    <sc-icon type="bell" color="dark-gray" size="medium" />
  </sc-badge>
  <sc-badge value="9+">
    <sc-icon type="bell" color="dark-gray" size="medium" />
  </sc-badge>
  <sc-badge value="new">
    <sc-icon type="bell" color="dark-gray" size="medium" />
  </sc-badge>
</div>

✨ 사용 예시 모음 ​

▸ 숫자 배지 ​

99
vue
<sc-badge value="99">
  <sc-icon type="bell" color="dark-gray" size="medium" />
</sc-badge>

▸ 점(badge) 모드 ​

vue
<sc-badge dot>
  <sc-icon type="bell" color="dark-gray" size="medium" />
</sc-badge>

▸ 컬러 커스터마이징 color, background-color ​

new
new
vue
<sc-badge value="new" background-color="#00abd6" color="white">
  <sc-icon type="bell" color="dark-gray" size="medium" />
</sc-badge>

<sc-badge value="new" background-color="#ffcc00" color="black">
  <sc-button>comments</sc-button>
</sc-badge>

<sc-badge dot background-color="#00abd6">
  <sc-icon type="bell" color="dark-gray" size="medium" />
</sc-badge>

🛠️ 속성 (Props) ​

이름타입기본값설명
valueString | Number''표시할 텍스트 또는 숫자. 빈 문자열이면 숨김 처리
dotBooleanfalsetrue일 경우 점(badge) 모드로 표시
colorString#ffffff배지 텍스트의 색상 (dot 모드 제외)
backgroundColorString#ef4444배지 배경색

📤 이벤트 (Emits) ​

이벤트 이름설명
click배지 클릭 시 발생

🔳 슬롯 (Slots) ​

이름설명
default배지를 적용할 요소(버튼, 아이콘 등)

🎨 스타일 클래스 ​

클래스명설명
sc-badge베이스 래퍼 클래스
badge배지 요소(sup 태그)
dotdot 모드일 때 추가되는 클래스
double2자리 이상일 때 크기 조정