# Badge URL: /react/components/badge Source: https://github.com/daangn/seed-design/blob/dev/docs/content/react/components/badge.mdx 객체의 속성이나 상태를 시각적으로 표현하는 작은 텍스트 라벨입니다. 사용자의 주의를 끌고 콘텐츠의 빠른 인지와 탐색을 돕기 위해 사용됩니다. 사용 가능 버전: @seed-design/react@0.0.1, @seed-design/css@0.0.1 ## Preview ```tsx import { Badge } from "@seed-design/react"; export default function BadgePreview() { return 라벨; } ``` ## Usage ```tsx import { Badge } from "@seed-design/react"; ``` ```tsx Badge ``` ## Props ## Examples ### Truncating Behavior Badge는 긴 텍스트를 잘라내고 생략 부호를 표시합니다. ```tsx import { Badge, VStack } from "@seed-design/react"; export default function BadgeTruncating() { return ( In velit velit deserunt amet veniam incididunt consectetur incididunt Lorem. In velit velit deserunt amet veniam incididunt consectetur incididunt Lorem. ); } ``` ### Tones and Variants #### Neutral ```tsx import { Badge, HStack, VStack } from "@seed-design/react"; export default function BadgeNeutral() { return ( 라벨 라벨 라벨 라벨 라벨 라벨 ); } ``` #### Brand ```tsx import { Badge, HStack, VStack } from "@seed-design/react"; export default function BadgeBrand() { return ( 라벨 라벨 라벨 라벨 라벨 라벨 ); } ``` #### Informative ```tsx import { Badge, HStack, VStack } from "@seed-design/react"; export default function BadgeInformative() { return ( 라벨 라벨 라벨 라벨 라벨 라벨 ); } ``` #### Positive ```tsx import { Badge, HStack, VStack } from "@seed-design/react"; export default function BadgePositive() { return ( 라벨 라벨 라벨 라벨 라벨 라벨 ); } ``` #### Warning ```tsx import { Badge, HStack, VStack } from "@seed-design/react"; export default function BadgeWarning() { return ( 라벨 라벨 라벨 라벨 라벨 라벨 ); } ``` #### Critical ```tsx import { Badge, HStack, VStack } from "@seed-design/react"; export default function BadgeCritical() { return ( 라벨 라벨 라벨 라벨 라벨 라벨 ); } ```