NotificationBadge - OLUN. Design System

Badge와 차이: Badge는 범용 짧은 메타데이터·상태·카테고리·수량 라벨이고, NotificationBadge는 읽지 않은 항목 수처럼 숫자 count에만 사용합니다.
0 숨김: count가 0 이하이면 렌더링하지 않아 불필요한 노이즈를 만들지 않습니다.
max: 큰 숫자는 max 기준으로 `99+`처럼 cap 처리합니다.
placement: corner는 아이콘·버튼 모서리에 절대 배치하고, inline은 메뉴 행 끝 정렬에 사용합니다.

0일 때 숨김

읽지 않은 항목이 없으면 배지를 렌더링하지 않습니다

읽지 않은 알림 없음

코드 보기tsx

import { NotificationBadge } from "@olundot/ui";

export function NotificationBadgeHiddenZero() {
  return (
    <div style={{ display: "flex", gap: "16px", alignItems: "center" }}>
      <span className="text-xs font-medium text-text-tertiary">읽지 않은 알림 없음</span>
      <NotificationBadge count={0} />
    </div>
  );
}

모서리 배치

아이콘 버튼이나 아바타 모서리에 새 알림 수를 고정

코드 보기tsx

import { Button, NotificationBadge } from "@olundot/ui";

export function NotificationBadgeCorner() {
  return (
    <div style={{ position: "relative", display: "inline-flex" }}>
      <Button size="sm" variant="outline">알림</Button>
      <NotificationBadge count={7} placement="corner" />
    </div>
  );
}

인라인 배치

사이드바와 메뉴 행의 오른쪽 끝에 수량을 정렬

공지사항12

검토 요청3

코드 보기tsx

import { NotificationBadge } from "@olundot/ui";

export function NotificationBadgeInline() {
  return (
    <div style={{ display: "grid", gap: "8px", width: "220px" }}>
      <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
        <span>공지사항</span>
        <NotificationBadge count={12} placement="inline" size="md" />
      </div>
      <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
        <span>검토 요청</span>
        <NotificationBadge count={3} placement="inline" />
      </div>
    </div>
  );
}

최대값 cap

큰 수량은 max 기준으로 줄여 표시

99+9+

코드 보기tsx

import { NotificationBadge } from "@olundot/ui";

export function NotificationBadgeMaxCap() {
  return (
    <div style={{ display: "flex", gap: "12px", alignItems: "center" }}>
      <NotificationBadge count={150} max={99} />
      <NotificationBadge count={24} max={9} size="md" />
    </div>
  );
}