SEED Design

Badge

Badge는 객체의 속성이나 상태를 시각적으로 표현하는 작은 텍스트 라벨입니다. 사용자의 주의를 끌고 콘텐츠의 빠른 인지와 탐색을 돕기 위해 사용됩니다.

import { Badge } from "@seed-design/react";

export default function BadgePreview() {
  return <Badge>라벨</Badge>;
}

Usage

import { Badge } from "@seed-design/react";
<Badge>Badge</Badge>

Props

Prop

Type

Examples

Truncating Behavior

Badge는 긴 텍스트를 잘라내고 생략 부호를 표시합니다.

import { Badge, VStack } from "@seed-design/react";

export default function BadgeTruncating() {
  return (
    <VStack gap="x4">
      <Badge size="medium">
        In velit velit deserunt amet veniam incididunt consectetur incididunt Lorem.
      </Badge>
      <Badge size="large">
        In velit velit deserunt amet veniam incididunt consectetur incididunt Lorem.
      </Badge>
    </VStack>
  );
}

Tones and Variants

Neutral

import { Badge, HStack, VStack } from "@seed-design/react";

export default function BadgeNeutral() {
  return (
    <HStack gap="x4">
      <VStack gap="x4">
        <Badge tone="neutral" variant="solid" size="medium">
          라벨
        </Badge>
        <Badge tone="neutral" variant="weak" size="medium">
          라벨
        </Badge>
        <Badge tone="neutral" variant="outline" size="medium">
          라벨
        </Badge>
      </VStack>
      <VStack gap="x4">
        <Badge tone="neutral" variant="solid" size="large">
          라벨
        </Badge>
        <Badge tone="neutral" variant="weak" size="large">
          라벨
        </Badge>
        <Badge tone="neutral" variant="outline" size="large">
          라벨
        </Badge>
      </VStack>
    </HStack>
  );
}

Brand

import { Badge, HStack, VStack } from "@seed-design/react";

export default function BadgeBrand() {
  return (
    <HStack gap="x4">
      <VStack gap="x4">
        <Badge tone="brand" variant="solid" size="medium">
          라벨
        </Badge>
        <Badge tone="brand" variant="weak" size="medium">
          라벨
        </Badge>
        <Badge tone="brand" variant="outline" size="medium">
          라벨
        </Badge>
      </VStack>
      <VStack gap="x4">
        <Badge tone="brand" variant="solid" size="large">
          라벨
        </Badge>
        <Badge tone="brand" variant="weak" size="large">
          라벨
        </Badge>
        <Badge tone="brand" variant="outline" size="large">
          라벨
        </Badge>
      </VStack>
    </HStack>
  );
}

Informative

import { Badge, HStack, VStack } from "@seed-design/react";

export default function BadgeInformative() {
  return (
    <HStack gap="x4">
      <VStack gap="x4">
        <Badge tone="informative" variant="solid" size="medium">
          라벨
        </Badge>
        <Badge tone="informative" variant="weak" size="medium">
          라벨
        </Badge>
        <Badge tone="informative" variant="outline" size="medium">
          라벨
        </Badge>
      </VStack>
      <VStack gap="x4">
        <Badge tone="informative" variant="solid" size="large">
          라벨
        </Badge>
        <Badge tone="informative" variant="weak" size="large">
          라벨
        </Badge>
        <Badge tone="informative" variant="outline" size="large">
          라벨
        </Badge>
      </VStack>
    </HStack>
  );
}

Positive

import { Badge, HStack, VStack } from "@seed-design/react";

export default function BadgePositive() {
  return (
    <HStack gap="x4">
      <VStack gap="x4">
        <Badge tone="positive" variant="solid" size="medium">
          라벨
        </Badge>
        <Badge tone="positive" variant="weak" size="medium">
          라벨
        </Badge>
        <Badge tone="positive" variant="outline" size="medium">
          라벨
        </Badge>
      </VStack>
      <VStack gap="x4">
        <Badge tone="positive" variant="solid" size="large">
          라벨
        </Badge>
        <Badge tone="positive" variant="weak" size="large">
          라벨
        </Badge>
        <Badge tone="positive" variant="outline" size="large">
          라벨
        </Badge>
      </VStack>
    </HStack>
  );
}

Warning

import { Badge, HStack, VStack } from "@seed-design/react";

export default function BadgeWarning() {
  return (
    <HStack gap="x4">
      <VStack gap="x4">
        <Badge tone="warning" variant="solid" size="medium">
          라벨
        </Badge>
        <Badge tone="warning" variant="weak" size="medium">
          라벨
        </Badge>
        <Badge tone="warning" variant="outline" size="medium">
          라벨
        </Badge>
      </VStack>
      <VStack gap="x4">
        <Badge tone="warning" variant="solid" size="large">
          라벨
        </Badge>
        <Badge tone="warning" variant="weak" size="large">
          라벨
        </Badge>
        <Badge tone="warning" variant="outline" size="large">
          라벨
        </Badge>
      </VStack>
    </HStack>
  );
}

Critical

import { Badge, HStack, VStack } from "@seed-design/react";

export default function BadgeCritical() {
  return (
    <HStack gap="x4">
      <VStack gap="x4">
        <Badge tone="critical" variant="solid" size="medium">
          라벨
        </Badge>
        <Badge tone="critical" variant="weak" size="medium">
          라벨
        </Badge>
        <Badge tone="critical" variant="outline" size="medium">
          라벨
        </Badge>
      </VStack>
      <VStack gap="x4">
        <Badge tone="critical" variant="solid" size="large">
          라벨
        </Badge>
        <Badge tone="critical" variant="weak" size="large">
          라벨
        </Badge>
        <Badge tone="critical" variant="outline" size="large">
          라벨
        </Badge>
      </VStack>
    </HStack>
  );
}

Last updated on

On this page

Usage
Props
Examples
Truncating Behavior
Tones and Variants
Neutral
Brand
Informative
Positive
Warning
Critical