SEED Design

Manner Temp Badge

매너 온도를 배지 형태로 표현하는 컴포넌트입니다. 콤팩트한 공간에서 사용자의 매너 온도 레벨을 간단히 표시할 때 사용됩니다.

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

export default function BadgePreview() {
  return (
    <VStack gap="x1" align="flex-start">
      <MannerTempBadge temperature={12.5} />
      <MannerTempBadge temperature={30} />
      <MannerTempBadge temperature={36} />
      <MannerTempBadge temperature={36.5} />
      <MannerTempBadge temperature={37} />
      <MannerTempBadge temperature={40} />
      <MannerTempBadge temperature={45} />
      <MannerTempBadge temperature={55} />
      <MannerTempBadge temperature={65} />
      <MannerTempBadge temperature={80} />
    </VStack>
  );
}

Installation

npx @seed-design/cli@latest add ui:manner-temp-badge

Props

Prop

Type

Last updated on

On this page

Installation
Props