# Notification Badge
URL: /lynx/components/notification-badge
Source: https://github.com/daangn/seed-design/blob/dev/docs/content/lynx/components/notification-badge.mdx

아이콘이나 텍스트에 새로운 알림 또는 읽지 않은 항목이 있음을 표시하는 컴포넌트입니다.

Lynx Engine 최소 버전: 3.6

사용 가능 버전: @seed-design/lynx-react@0.6.0, @seed-design/lynx-css@0.10.0

## Installation

- npm: npm install @seed-design/lynx-react @seed-design/lynx-css
- pnpm: pnpm add @seed-design/lynx-react @seed-design/lynx-css
- yarn: yarn add @seed-design/lynx-react @seed-design/lynx-css
- bun: bun add @seed-design/lynx-react @seed-design/lynx-css

<Callout>
  Lynx `NotificationBadge`는 별도 Registry 컴포넌트 없이 `@seed-design/lynx-react` 패키지에서 직접 제공합니다.
</Callout>

## Usage

## Preview

```tsx
import "./styles";

import { root, type ReactNode } from "@lynx-js/react";
import {
  Box,
  HStack,
  NotificationBadge,
  NotificationBadgePositioner,
  Text,
  useSeedClassName,
} from "@seed-design/lynx-react";

function IconAnchor({ children }: { children: ReactNode }) {
  return (
    <Box position="relative" width="24px" height="24px" bg="bg.neutralWeak" borderRadius="full">
      {children}
    </Box>
  );
}

function Root() {
  const seedClassName = useSeedClassName({ colorMode: "system" });

  return (
    <page className={seedClassName}>
      <HStack className="notification-badge-preview" gap="x8" align="center">
        <IconAnchor>
          <NotificationBadgePositioner size="small" attach="icon">
            <NotificationBadge accessibility-elements-hidden={true} />
          </NotificationBadgePositioner>
        </IconAnchor>

        <IconAnchor>
          <NotificationBadgePositioner size="large" attach="icon">
            <NotificationBadge>99+</NotificationBadge>
          </NotificationBadgePositioner>
        </IconAnchor>

        <Box position="relative">
          <Text color="fg.neutral">Inbox</Text>
          <NotificationBadgePositioner size="small" attach="text">
            <NotificationBadge accessibility-elements-hidden={true} />
          </NotificationBadgePositioner>
        </Box>
      </HStack>
    </page>
  );
}

root.render(<Root />);
```

`NotificationBadgePositioner`를 알림을 표시할 요소 안에 배치합니다. 부모 요소에는 `position="relative"`를 지정해야 합니다.

`size="large"`는 최대 4자의 알림 수를 표시할 때 사용합니다. `size="small"`은 라벨 없이 알림의 존재만 나타냅니다.

작은 배지는 시각적인 장식으로 숨기고, 함께 사용하는 버튼이나 메뉴에 읽지 않은 상태를 설명하는 접근성 이름을 제공하세요.

## Props

## 웹 버전과의 차이

<Callout type="warning">
  Lynx 버전은 HTML `<span>` 대신 native `<text>`와 `<view>`를 렌더링합니다. HTML attribute와 `asChild`는 제공하지 않으며, native 접근성 속성과 `bind*` 이벤트를 사용합니다.
</Callout>