Components

Component

TagGroup

Compact metadata tags separated in one horizontal summary row.

ReactReact Native8 props
PreviewReact
500m서초4동3분 전
인증됨후기 37단골 12

Imports

import { TagGroupRoot, TagGroupItem } from "@hozorica/hods-react/tag-group";
import { TagGroupRoot, TagGroupItem } from "@hozorica/hods-react-native/tag-group";

Props

PropTypeDescription
separatorReactNodeVisual separator inserted between items.
sizet2 | t3 | t4Text density.
truncatebooleanKeeps the group to one line and truncates labels.
weightbold | regularText weight inherited by items.
tonebrand | neutral | neutralSubtleText color inherited by items.
labelReactNodeItem label.
prefixIcon / suffixIconReactNodeOptional item icon slots.
flexShrinktrue | 0 | numberControls item shrink priority in truncate mode.

Platform Support

React

Inline tag metadata group with separators, tone, weight, icon slots, and truncation.

React Native

Flex row metadata group with matching separator and item API.

Usage

<TagGroupRoot><TagGroupItem label="500m" /><TagGroupItem label="서초4동" /><TagGroupItem label="3분 전" /></TagGroupRoot>

Notes

  • Separators are aria-hidden, so do not use them for semantic information.
  • Use flexShrink={0} on items that should not collapse in truncate mode.