syidaxdesign system
홈 가격 내 정보
ComponentsData display

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>

API reference

#

이름에 마우스를 올리거나 키보드로 선택하면 적용 코드를 확인할 수 있습니다. 터치 화면에서는 이름을 누르세요.

<sy-badge>

Properties

Attribute / PropertyTypeDefaultDescription
booleanfalse숫자 대신 점으로 표시합니다.
booleanfalse컴포넌트의 표시를 숨깁니다.
booleanfalse다른 요소를 감싸지 않는 단독 배지입니다.
numberInfinity숫자 표시 상한입니다. 넘으면 +로 표시합니다.
number0표시할 개수입니다.
'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight''topRight'감싼 요소의 어느 모서리에 표시할지 지정합니다.
'small' | 'medium''medium'컴포넌트의 크기입니다.
'red' | 'yellow' | 'green' | 'blue' | 'gray''red'컴포넌트의 표시 스타일입니다.

Slots

SlotDescription
컴포넌트의 본문 또는 자식 항목입니다.
Design SystemTab 이동 Enter 열기