Badge

요소에 관련된 개수나 새로운 상태를 작게 표시합니다.

<sy-badge>설치 안내 기본 사용법

Live preview

컴포넌트를 조작하면 여기에 결과가 표시됩니다.

개수표시 상한색상위치

점 표시숨기기

코드 보기

HTML

<sy-badge
  value="8"
  overflowcount="99"
  variant="red"
  position="topRight"
>
  <sy-button aria-label="받은 알림">알림</sy-button>
</sy-badge>

사용 가이드

알림 개수처럼 짧은 수치·상태를 보조적으로 표시합니다. 긴 상태 설명은 Tag나 본문 텍스트로 제공하세요.

대상에 붙이기

대상 요소를 감싸 모서리에 배지를 표시합니다.

독립적으로 표시

standalone으로 다른 요소에 붙이지 않고 사용합니다.

변화 여부만 표시

dot으로 숫자 없이 새로운 상태가 있음을 알립니다.

예제

개수 표시

연관된 버튼의 모서리에 수치를 배치합니다.

코드 보기

HTML

<sy-badge value="8">
  <sy-button>알림</sy-button>
</sy-badge>

큰 수치

99를 넘는 값은 99+로 표현합니다.

코드 보기

HTML

<sy-badge value="123" overflowcount="99">
  <sy-button>받은 편지</sy-button>
</sy-badge>

새로운 상태

정확한 개수가 필요하지 않은 상태입니다.

코드 보기

HTML

<sy-badge dot>
  <sy-button>업데이트</sy-button>
</sy-badge>

단독 표시

행의 끝이나 제목 옆에 수치를 표시합니다.

코드 보기

HTML

<div style="display:flex;flex-wrap:wrap;align-items:center;gap:16px">
  <sy-badge
    value="12"
    standalone
    variant="red"
  ></sy-badge>
  <sy-badge
    value="12"
    standalone
    variant="blue"
  ></sy-badge>
  <sy-badge
    value="12"
    standalone
    variant="green"
  ></sy-badge>
</div>

알림 표시 숨기기

hidden으로 배지만 감춥니다. 새 알림이 없거나 표시가 필요 없는 상황에 사용하세요.

코드 보기

HTML

<sy-badge
  value="8"
  overflowcount="99"
  variant="red"
  position="topRight"
  hidden
  id="supplement-1"
>
  <sy-button aria-label="받은 알림">알림</sy-button>
</sy-badge>

<script type="module">
  const component1 = document.querySelector("#supplement-1");
  Object.assign(component1, {
    "hidden": true
  });
</script>

왼쪽 하단 배지

대상의 왼쪽 아래에 녹색 숫자 배지를 배치합니다.

코드 보기

HTML

<sy-badge
  value="12"
  overflowcount="99"
  variant="green"
  position="bottomLeft"
  id="supplement-1"
>
  <sy-button aria-label="받은 알림">알림</sy-button>
</sy-badge>

<script type="module">
  const component1 = document.querySelector("#supplement-1");
  Object.assign(component1, {
    "position": "bottomLeft",
    "variant": "green",
    "value": 12
  });
</script>

기능별 예제

10개 주제에서 필요한 기능을 선택하세요. 속성 설정, 메서드 호출, 이벤트 결과와 슬롯 구성을 실행 화면과 코드로 확인할 수 있습니다.

기능 찾기

사용 예제 · Overview

선택한 예제를 직접 조작해 보세요. 여러 구성이 있는 주제는 세부 예제를 바꿀 수 있습니다.

코드 보기

HTML

예제를 불러오고 있습니다.