Tag group

TagGroup is a thin wrapper that locks spacing for a cluster of Tag elements. Replaces the ad-hoc <div style={{ display: 'flex', gap, flexWrap }}> that grew around tag arrays across the portal.

Use it as a Field value, inside a table cell, or standalone inside a SheetSection. For status clusters, use BadgeGroup — same shape, different child.

Use it for

• Industry / vertical / segment lists on company rows
• Brand personality / voice / style traits on profile sheets
• Service category clusters
• Any read-only multi-tag display

Import

import { TagGroup, Tag } from '@brikdesigns/bds';

Variants

Default

Gap sizes

Three locked gaps — xs (default, tight), sm (standard), md (roomy).

Pattern: inside a Field

The canonical use — a Field value expressed as tagged categories.

import { TagGroup, Tag, Field } from '@brikdesigns/bds';

<Field label="Services offered">
  <TagGroup>
    <Tag size="sm">Cosmetic</Tag>
    <Tag size="sm">General</Tag>
    <Tag size="sm">Implants</Tag>
  </TagGroup>
</Field>

When not to use

• Don't use non-Tag children. TagGroup locks spacing for Tag's specific footprint — arbitrary nodes (Buttons, Badges, raw text) misalign.
• Don't use TagGroup for status clusters. Use BadgeGroup — same API, different child.

Accessibility

• Renders a plain <div> container. Each Tag keeps its own semantics.
• No role or aria-label is added — surface the group's label via the parent <Field> or a heading.

API

Related

• Tag — the child component
• BadgeGroup — status sibling
• Storybook playground