SEED Design

Tag Group

Tag Group은 아이콘 및 텍스트로 이루어진 태그를 구분 기호와 함께 수평 레이아웃으로 표시하는 컴포넌트입니다.

import { IconLocationpinFill } from "@karrotmarket/react-monochrome-icon";
import { PrefixIcon, TagGroup } from "@seed-design/react";

export default function TagGroupPreview() {
  return (
    <TagGroup.Root>
      <TagGroup.Item>
        <PrefixIcon svg={<IconLocationpinFill />} />
        500m
      </TagGroup.Item>
      <TagGroup.Item>서초4동</TagGroup.Item>
      <TagGroup.Item>3분 전</TagGroup.Item>
    </TagGroup.Root>
  );
}

Usage

import { TagGroup, TagGroupRoot, TagGroupItem } from '@seed-design/react';
<TagGroupRoot>
  <TagGroupItem>Tag 1</TagGroupItem>
  <TagGroupItem>Tag 2</TagGroupItem>
  <TagGroupItem>Tag 3</TagGroupItem>
</TagGroupRoot>
<TagGroup.Root>
  <TagGroup.Item>Tag 1</TagGroup.Item>
  <TagGroup.Item>Tag 2</TagGroup.Item>
  <TagGroup.Item>Tag 3</TagGroup.Item>
</TagGroup.Root>

Props

TagGroupRoot

Prop

Type

TagGroupItem

Prop

Type

Examples

Sizes

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

export default function TagGroupSizes() {
  return (
    <VStack gap="spacingY.componentDefault" align="center">
      <TagGroup.Root size="t2">
        <TagGroup.Item>t2</TagGroup.Item>
        <TagGroup.Item>t2</TagGroup.Item>
        <TagGroup.Item>t2</TagGroup.Item>
      </TagGroup.Root>
      <TagGroup.Root size="t3">
        <TagGroup.Item>t3</TagGroup.Item>
        <TagGroup.Item>t3</TagGroup.Item>
        <TagGroup.Item>t3</TagGroup.Item>
      </TagGroup.Root>
      <TagGroup.Root size="t4">
        <TagGroup.Item>t4</TagGroup.Item>
        <TagGroup.Item>t4</TagGroup.Item>
        <TagGroup.Item>t4</TagGroup.Item>
      </TagGroup.Root>
    </VStack>
  );
}

Weights

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

export default function TagGroupWeights() {
  return (
    <VStack gap="spacingY.componentDefault" align="center">
      <TagGroup.Root weight="regular">
        <TagGroup.Item>regular</TagGroup.Item>
        <TagGroup.Item>regular</TagGroup.Item>
        <TagGroup.Item>regular</TagGroup.Item>
      </TagGroup.Root>
      <TagGroup.Root weight="bold">
        <TagGroup.Item>bold</TagGroup.Item>
        <TagGroup.Item>bold</TagGroup.Item>
        <TagGroup.Item>bold</TagGroup.Item>
      </TagGroup.Root>
    </VStack>
  );
}

Tones

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

export default function TagGroupTones() {
  return (
    <VStack gap="spacingY.componentDefault" align="center">
      <TagGroup.Root tone="neutralSubtle">
        <TagGroup.Item>neutralSubtle</TagGroup.Item>
        <TagGroup.Item>neutralSubtle</TagGroup.Item>
        <TagGroup.Item>neutralSubtle</TagGroup.Item>
      </TagGroup.Root>
      <TagGroup.Root tone="neutral">
        <TagGroup.Item>neutral</TagGroup.Item>
        <TagGroup.Item>neutral</TagGroup.Item>
        <TagGroup.Item>neutral</TagGroup.Item>
      </TagGroup.Root>
      <TagGroup.Root tone="brand">
        <TagGroup.Item>brand</TagGroup.Item>
        <TagGroup.Item>brand</TagGroup.Item>
        <TagGroup.Item>brand</TagGroup.Item>
      </TagGroup.Root>
    </VStack>
  );
}

With Icons

import { IconLocationpinFill, IconMegaphoneFill } from "@karrotmarket/react-monochrome-icon";
import { PrefixIcon, SuffixIcon, TagGroup, VStack } from "@seed-design/react";

export default function TagGroupWithIcons() {
  return (
    <VStack gap="spacingY.componentDefault" align="center">
      <TagGroup.Root>
        <TagGroup.Item>
          광고
          <SuffixIcon svg={<IconMegaphoneFill />} />
        </TagGroup.Item>
        <TagGroup.Item>끌올 3시간 전</TagGroup.Item>
        <TagGroup.Item>서초4동</TagGroup.Item>
      </TagGroup.Root>
      <TagGroup.Root>
        <TagGroup.Item>
          <PrefixIcon svg={<IconLocationpinFill />} />
          서초4동
        </TagGroup.Item>
        <TagGroup.Item>인증 5회</TagGroup.Item>
        <TagGroup.Item>3분 전</TagGroup.Item>
      </TagGroup.Root>
    </VStack>
  );
}

Customizing TagGroupItem

TagGroupRoot에 지정한 size, tone, weight을 TagGroupItem에서 덮어씌울 수 있습니다.

import {
  IconCheckmarkCircleFill,
  IconHeartFill,
  IconHorizline2VerticalChatbubbleRectangularRightFill,
  IconStarFill,
} from "@karrotmarket/react-monochrome-icon";
import { Icon, SuffixIcon, TagGroup, VStack } from "@seed-design/react";

export default function TagGroupCustomizingItem() {
  return (
    <VStack gap="spacingY.componentDefault" align="center">
      <TagGroup.Root>
        <TagGroup.Item weight="bold" tone="neutral" aria-label="평점 4.5">
          <Icon svg={<IconStarFill />} color="fg.brand" />
          4.5
        </TagGroup.Item>
        <TagGroup.Item>후기 37</TagGroup.Item>
        <TagGroup.Item>단골 12</TagGroup.Item>
      </TagGroup.Root>
      <TagGroup.Root tone="neutral">
        <TagGroup.Item tone="brand">
          인증됨
          <SuffixIcon svg={<IconCheckmarkCircleFill />} />
        </TagGroup.Item>
        <TagGroup.Item aria-label="관심 10개">
          <Icon svg={<IconHeartFill />} />
          10
        </TagGroup.Item>
        <TagGroup.Item aria-label="댓글 3개">
          <Icon svg={<IconHorizline2VerticalChatbubbleRectangularRightFill />} />3
        </TagGroup.Item>
      </TagGroup.Root>
    </VStack>
  );
}

Customizing Separators

TagGroupRoot에 separator를 지정하여 구분 기호를 변경할 수 있습니다.

스크린 리더는 각 태그 항목 사이에 지정된 구분 기호를 읽지 않습니다. 의미가 있는(semantic) 정보를 Separator로 사용하는 것을 피하세요.

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

export default function TagGroupCustomizingSeparators() {
  return (
    <VStack gap="spacingY.componentDefault" align="center">
      <TagGroup.Root separator=" | " size="t4">
        <TagGroup.Item>가</TagGroup.Item>
        <TagGroup.Item>나</TagGroup.Item>
        <TagGroup.Item>다</TagGroup.Item>
        <TagGroup.Item>라</TagGroup.Item>
      </TagGroup.Root>
      <TagGroup.Root separator=" " size="t4">
        <TagGroup.Item>가</TagGroup.Item>
        <TagGroup.Item>나</TagGroup.Item>
        <TagGroup.Item>다</TagGroup.Item>
        <TagGroup.Item>라</TagGroup.Item>
      </TagGroup.Root>
    </VStack>
  );
}

Wrapping Behavior

import { IconLocationpinFill } from "@karrotmarket/react-monochrome-icon";
import { Flex, PrefixIcon, TagGroup } from "@seed-design/react";

export default function TagGroupWrappingBehavior() {
  return (
    <Flex align="center" justify="center" grow width="full" bg="bg.layerBasement" borderRadius="r2">
      <Flex
        align="center"
        justify="center"
        padding="x3"
        bg="bg.layerDefault"
        borderRadius="r2"
        borderWidth={1}
        borderColor="stroke.neutralWeak"
        style={{ resize: "horizontal", overflow: "auto", maxWidth: "max-content" }}
      >
        <TagGroup.Root size="t4">
          <TagGroup.Item>
            <PrefixIcon svg={<IconLocationpinFill />} />
            500m
          </TagGroup.Item>
          <TagGroup.Item>서초4동</TagGroup.Item>
          <TagGroup.Item>3분 전</TagGroup.Item>
        </TagGroup.Root>
      </Flex>
    </Flex>
  );
}

Last updated on

On this page

Usage
Props
TagGroupRoot
TagGroupItem
Examples
Sizes
Weights
Tones
With Icons
Customizing TagGroupItem
Customizing Separators
Wrapping Behavior