배지

배지 (Badge)

상태나 라벨을 표시할 때 쓰는 스타일화된 배지 요소예요. span 요소 기반으로 만들어진 컴포넌트예요.

출처: 문서

본문

스타일화된 배지 요소예요.

<Flex gap="2">
  <Badge color="orange">In progress</Badge>

  <Badge color="blue">In review</Badge>

  <Badge color="green">Complete</Badge>
</Flex>

API Reference

이 컴포넌트는 span 요소를 기반으로 하며 공통 margin props를 지원해요.

Prop Type Default
asChild boolean No default value
size Responsive<"1" | "2" | "3"> "1"
variant "solid" | "soft" | "surface" | "outline" "soft"
color enum No default value
highContrast boolean No default value
radius "none" | "small" | "medium" | "large" | "full" No default value

예제 (Examples)

Size

size prop으로 크기를 제어해요.

<Flex align="center" gap="2">
  <Badge size="1" color="indigo">
    New
  </Badge>

  <Badge size="2" color="indigo">
    New
  </Badge>

  <Badge size="3" color="indigo">
    New
  </Badge>
</Flex>

Variant

variant prop으로 시각적 스타일을 제어해요.

<Flex gap="2">
  <Badge variant="solid" color="indigo">
    New
  </Badge>

  <Badge variant="soft" color="indigo">
    New
  </Badge>

  <Badge variant="surface" color="indigo">
    New
  </Badge>

  <Badge variant="outline" color="indigo">
    New
  </Badge>
</Flex>

Color

color prop으로 특정 color를 지정해요.

<Flex gap="2">
  <Badge color="indigo">New</Badge>

  <Badge color="cyan">New</Badge>

  <Badge color="orange">New</Badge>

  <Badge color="crimson">New</Badge>
</Flex>

High-contrast

highContrast prop으로 배경과의 색 대비를 높여요.

<Flex direction="column" gap="2">
  <Flex gap="2">
    <Badge color="gray" variant="solid">
      New
    </Badge>

    <Badge color="gray" variant="soft">
      New
    </Badge>

    <Badge color="gray" variant="surface">
      New
    </Badge>

    <Badge color="gray" variant="outline">
      New
    </Badge>
  </Flex>

  <Flex gap="2">
    <Badge color="gray" variant="solid" highContrast>
      New
    </Badge>

    <Badge color="gray" variant="soft" highContrast>
      New
    </Badge>

    <Badge color="gray" variant="surface" highContrast>
      New
    </Badge>

    <Badge color="gray" variant="outline" highContrast>
      New
    </Badge>
  </Flex>
</Flex>

Radius

radius prop으로 특정 radius 값을 지정해요.

<Flex gap="2">
  <Badge variant="solid" radius="none" color="indigo">
    New
  </Badge>

  <Badge variant="solid" radius="large" color="indigo">
    New
  </Badge>

  <Badge variant="solid" radius="full" color="indigo">
    New
  </Badge>
</Flex>

더 알아보기 (Learn more)