Badge group

BadgeGroup is the indicator-family sibling of TagGroup. Same API shape, different child. Use it when multiple status indicators sit side by side — integration health rows, payment-state summaries, multi-status entity rows.

Use it for

• Multiple statuses on one entity (Helicone Active, Stripe Pending, Supabase Active)
• Integration health rows where each service has its own status
• Compact status clusters inside a Field or table cell

For categorical labels (industry, segment), use TagGroup.

Import

import { BadgeGroup, Badge } 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 a status cluster.

import { BadgeGroup, Badge, Field } from '@brikdesigns/bds';

<Field label="Integrations health">
  <BadgeGroup>
    <Badge status="positive" size="sm">Helicone</Badge>
    <Badge status="positive" size="sm">Supabase</Badge>
    <Badge status="warning" size="sm">Stripe</Badge>
  </BadgeGroup>
</Field>

When not to use

• Don't use non-Badge children. BadgeGroup locks spacing for Badge's specific footprint; arbitrary nodes (Buttons, Tags, raw text) misalign.
• Don't mix solid and subtle appearances inside one group. BadgeGroup doesn't enforce this at the API, but it reads as inconsistent — pick one appearance per cluster.

Accessibility

• Renders a plain <div> container. Each Badge keeps its own semantics.
• No role or aria-label is added — if the group represents a labeled set (e.g. "Integrations"), surface that label via the parent <Field> or a heading.

API

Related

• Badge — the child component
• TagGroup — categorical sibling
• Storybook playground