SEED Design
DocsReactLynxAI IntegrationBreeze

Tag Group

아이콘과 텍스트 태그를 수평으로 나열해 여러 속성·상태·메타데이터를 한눈에 보여주는 정보 요약 컴포넌트입니다.

import { IconLocationpinFill } from "@karrotmarket/react-monochrome-icon";
import { TagGroupRoot, TagGroupItem } from "seed-design/ui/tag-group";

export default function TagGroupPreview() {
  return (
    <TagGroupRoot>
      <TagGroupItem prefixIcon={<IconLocationpinFill />} label="500m" />
      <TagGroupItem label="서초4동" />
      <TagGroupItem label="3분 전" />
    </TagGroupRoot>
  );
}

Installation

npx @seed-design/cli@latest add ui:tag-group

Props

TagGroupRoot

Prop

Type

TagGroupItem

Prop

Type

Examples

Sizes

import { VStack } from "@seed-design/react";
import { TagGroupRoot, TagGroupItem } from "seed-design/ui/tag-group";

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

Weights

import { VStack } from "@seed-design/react";
import { TagGroupRoot, TagGroupItem } from "seed-design/ui/tag-group";

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

Tones

import { VStack } from "@seed-design/react";
import { TagGroupRoot, TagGroupItem } from "seed-design/ui/tag-group";

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

With Icons

import { IconLocationpinFill, IconMegaphoneFill } from "@karrotmarket/react-monochrome-icon";
import { VStack } from "@seed-design/react";
import { TagGroupRoot, TagGroupItem } from "seed-design/ui/tag-group";

export default function TagGroupWithIcons() {
  return (
    <VStack gap="spacingY.componentDefault" align="center">
      <TagGroupRoot>
        <TagGroupItem label="광고" suffixIcon={<IconMegaphoneFill />} />
        <TagGroupItem label="끌올 3시간 전" />
        <TagGroupItem label="서초4동" />
      </TagGroupRoot>
      <TagGroupRoot>
        <TagGroupItem prefixIcon={<IconLocationpinFill />} label="서초4동" />
        <TagGroupItem label="인증 5회" />
        <TagGroupItem label="3분 전" />
      </TagGroupRoot>
    </VStack>
  );
}

Customizing TagGroupItem

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

필요한 경우 컴파운드 컴포넌트를 직접 사용하여 TagGroupItem 내부 요소를 커스터마이징할 수 있습니다.

import {
  IconCheckmarkCircleFill,
  IconHeartFill,
  IconHorizline2VerticalChatbubbleRectangularRightFill,
  IconStarFill,
} from "@karrotmarket/react-monochrome-icon";
import { Icon, VStack } from "@seed-design/react";
import { TagGroupRoot, TagGroupItem } from "seed-design/ui/tag-group";
import { TagGroup as SeedTagGroup } from "@seed-design/react";

export default function TagGroupCustomizingItem() {
  return (
    <VStack gap="spacingY.componentDefault" align="center">
      <TagGroupRoot>
        {/* You can use the compound components to customize the items */}
        <SeedTagGroup.Item weight="bold" tone="neutral" aria-label="평점 4.5">
          <Icon svg={<IconStarFill />} color="fg.brand" />
          <SeedTagGroup.ItemLabel>4.5</SeedTagGroup.ItemLabel>
        </SeedTagGroup.Item>
        <TagGroupItem label="후기 37" />
        <TagGroupItem label="단골 12" />
      </TagGroupRoot>
      <TagGroupRoot tone="neutral">
        <TagGroupItem tone="brand" suffixIcon={<IconCheckmarkCircleFill />} label="인증됨" />
        <TagGroupItem aria-label="관심 10개" prefixIcon={<IconHeartFill />} label="10" />
        <TagGroupItem
          aria-label="댓글 3개"
          prefixIcon={<IconHorizline2VerticalChatbubbleRectangularRightFill />}
          label="3"
        />
      </TagGroupRoot>
    </VStack>
  );
}

Customizing Separators

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

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

import { VStack } from "@seed-design/react";
import { TagGroupRoot, TagGroupItem } from "seed-design/ui/tag-group";

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

Wrapping Behavior

기본적으로 TagGroupRoot는 컨테이너 너비를 초과하면 줄바꿈이 발생합니다.

TagGroupRoot에 truncate prop을 지정하면 TagGroupRoot가 한 줄로 유지되고, 컨테이너 너비를 초과하는 경우 기본적으로 모든 TagGroupItem의 레이블에서 말줄임이 발생할 수 있습니다.

truncate prop을 사용하면서 특정 아이템이 축소되지 않도록 하려면 해당 TagGroupItem에 flexShrink={0}을 지정하세요. TagGroupItem에 flexShrink={number}를 지정하여 컨테이너 너비를 초과할 때 축소되는 우선순위를 조정할 수 있습니다.

import { IconBellFill, IconLocationpinFill } from "@karrotmarket/react-monochrome-icon";
import { Flex, Text, VStack } from "@seed-design/react";
import { TagGroupRoot, TagGroupItem } from "seed-design/ui/tag-group";
import type { PropsWithChildren, ReactNode } from "react";

export default function TagGroupWrappingBehavior() {
  return (
    <Flex
      align="center"
      justify="center"
      grow
      width="full"
      bg="bg.layerBasement"
      borderRadius="r2"
      p="x4"
    >
      <VStack
        gap="x2"
        width="350px"
        maxWidth="max-content"
        overflowX="auto"
        style={{ resize: "horizontal" }}
      >
        <Wrapper title="default (wrap)">
          <TagGroupRoot>
            <TagGroupItem prefixIcon={<IconLocationpinFill />} label="부산광역시 해운대구" />
            <TagGroupItem prefixIcon={<IconBellFill />} label="123 456 789 012 345" />
            <TagGroupItem label="Ut minim laboris enim" />
          </TagGroupRoot>
        </Wrapper>
        <Wrapper title="truncate">
          <TagGroupRoot truncate>
            <TagGroupItem prefixIcon={<IconLocationpinFill />} label="부산광역시 해운대구" />
            <TagGroupItem prefixIcon={<IconBellFill />} label="123 456 789 012 345" />
            <TagGroupItem label="Ut minim laboris enim" />
          </TagGroupRoot>
        </Wrapper>
        <Wrapper title="truncate, keep one fixed">
          <TagGroupRoot truncate>
            <TagGroupItem prefixIcon={<IconLocationpinFill />} label="부산광역시 해운대구" />
            <TagGroupItem
              flexShrink={0}
              prefixIcon={<IconBellFill />}
              label="123 456 789 012 345"
            />
            <TagGroupItem label="Ut minim laboris enim" />
          </TagGroupRoot>
        </Wrapper>
        <Wrapper title="truncate, mixed shrink ratios">
          <TagGroupRoot truncate>
            <TagGroupItem
              prefixIcon={<IconLocationpinFill />}
              flexShrink={1}
              label="부산광역시 해운대구"
            />
            <TagGroupItem
              flexShrink={100}
              prefixIcon={<IconBellFill />}
              label="123 456 789 012 345"
            />
            <TagGroupItem flexShrink={100} label="Ut minim laboris enim" />
          </TagGroupRoot>
        </Wrapper>
      </VStack>
    </Flex>
  );
}

function Wrapper({ title, children }: PropsWithChildren<{ title: ReactNode }>) {
  return (
    <VStack
      align="flex-start"
      justify="center"
      padding="x3"
      bg="bg.layerDefault"
      borderRadius="r2"
      borderWidth={1}
      borderColor="stroke.neutralWeak"
      gap="x1"
      overflowX="hidden"
    >
      <Text textStyle="t2Medium">{title}</Text>
      {children}
    </VStack>
  );
}

Last updated on

On this page

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