Tag Group

Installation

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

Usage

설치한 snippet은 TagGroupRoot와 TagGroupItem을 export 합니다. TagGroupItem은 label prop을 받아 내부에서 Lynx <text> label을 렌더합니다.

import { TagGroupRoot, TagGroupItem } from "@/components/ui/tag-group";

export function App() {
  return (
    <TagGroupRoot size="t2">
      <TagGroupItem label="동네 인증" />
      <TagGroupItem label="매너 온도 42.0°C" />
      <TagGroupItem tone="brand" weight="bold" label="추천" />
    </TagGroupRoot>
  );
}

TagGroupRoot의 size·weight·tone은 Context로 하위 TagGroupItem에 전파되며, 개별 TagGroupItem에서 prop으로 덮어쓸 수 있습니다. 구분자는 기본 " · "이고 separator prop으로 바꿀 수 있습니다.

TagGroupItem은 flexShrink를 지원합니다. 긴 태그가 있는 레이아웃에서 item의 축소 우선순위를 조정해야 할 때 사용하세요.

Tone / Separator

TagGroupRoot의 tone, weight, separator는 그룹 기본값으로 전달되고, 개별 TagGroupItem에서 필요한 값만 덮어쓸 수 있습니다.

import { TagGroupRoot, TagGroupItem } from "@/components/ui/tag-group";

export function TagGroupVariants() {
  return (
    <TagGroupRoot size="t2" tone="neutralSubtle" separator=" / ">
      <TagGroupItem tone="brand" weight="bold" label="NEW" />
      <TagGroupItem label="무료 나눔" />
    </TagGroupRoot>
  );
}

Props

TagGroupRoot

TagGroupItem

웹 버전과의 차이

렌더링 요소

레이아웃 모델 차이

• 웹: display: inline 기반 text flow. 컨테이너가 좁으면 마지막 item 내부 label text가 word 단위로 자연스럽게 wrap됩니다 (예: "Ut minim laboris enim" → "Ut minim" / "laboris enim" 두 줄로 쪼개짐).
• Lynx: flex 기반 item 단위 wrap. item은 content-size를 유지하고, 한 줄에 들어가지 않으면 item 전체가 다음 줄로 이동합니다. item 내부 text가 item 경계를 넘어 word-break되는 동작은 재현할 수 없습니다. Lynx TagGroupRoot는 이를 자연스럽게 보이도록 separator를 뒤따르는 item과 하나의 wrap 단위로 묶어 다음 줄로 함께 이동시킵니다.

미지원 prop

이벤트·ref

• 이벤트: Lynx는 onClick이 없고 bindtap / main-thread:bindtap을 사용합니다. TagGroup은 기본적으로 정적 표시라 인터랙션 prop이 노출되지는 않지만, TagGroupItem을 눌러야 한다면 호출부에서 직접 view 속성으로 처리하세요.
• ref: React.forwardRef로 ref가 전달됩니다 (SVGViewElement 타입으로 캐스트됨).