# Manner Temp Badge
URL: /lynx/components/manner-temp-badge
Source: https://github.com/daangn/seed-design/blob/dev/docs/content/lynx/components/manner-temp-badge.mdx

매너온도를 작은 배지 형태로 표현하는 컴포넌트입니다.

Lynx Engine 최소 버전: 3.6

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

## Preview

```tsx
import { VStack } from "@seed-design/lynx-react";
import { MannerTempBadge } from "@/components/ui/manner-temp-badge";

const temperatures = [12.5, 30, 36, 36.5, 37, 40, 45, 55, 65, 80];

export default function Example() {
  return (
    <VStack align="center" gap="x1">
      {temperatures.map((temperature) => (
        <MannerTempBadge key={temperature} temperature={temperature} />
      ))}
    </VStack>
  );
}
```

## 설치

- npm: npx @seed-design/cli@latest add ui:manner-temp-badge
- pnpm: pnpm dlx @seed-design/cli@latest add ui:manner-temp-badge
- yarn: yarn dlx @seed-design/cli@latest add ui:manner-temp-badge
- bun: bun x @seed-design/cli@latest add ui:manner-temp-badge

## 속성

## 사용법

`temperature`를 전달하면 구간에 맞는 `level`을 계산해 온도를 표시합니다. `level`을 직접 지정하면 계산 결과보다 우선합니다.

```tsx
import { MannerTempBadge } from "@/components/ui/manner-temp-badge";

export function App() {
  return <MannerTempBadge temperature={36.5} />;
}
```

### 직접 구성하기

표시 문구를 바꾸려면 `MannerTempBadge`에 `level`과 문자열 또는 숫자 자식을 전달합니다.

```tsx
import { MannerTempBadge } from "@seed-design/lynx-react";

export function App() {
  return <MannerTempBadge level="l4">36.5°C</MannerTempBadge>;
}
```

## 웹 버전과의 차이

<Callout type="warning">
  - HTML 속성 대신 Lynx native 속성을 사용합니다.
  - 웹의 `asChild`는 지원하지 않습니다.
</Callout>