Skip to content
Protocore Design Systemv1.6.9

/// Layout

Group

Alias of HStack — a horizontal flex row with token-based gap, alignment, and justification.

import { Group } from "@protocore/pds";
View as Markdown

An alias of HStack

Group is the Mantine-familiar name for this library's HStack — the horizontal Stack preset, exported under a second name for discoverability. Props are identical (gap, align, justify, wrap, …). See the Stack page for the full API, the equal-height row law, and VStack.

Basics

Lay controls out in a row with a token gap; use justify="between" to push a leading cluster and trailing action apart.

SYNCEDLAGGINGSTALLED

Group props

PropTypeDefaultDescription
asChildboolean
classNamestring
styleCSSProperties

Related

  • StackA flex container that stacks children on one axis with a token-scale gap, plus align/justify shorthands.
  • GridA CSS grid with either a responsive auto-fit track or a fixed column count, and a token-scale gap.
  • SpacerA presentational spacer — a fixed token-scale gap, or a flexible fill that pushes siblings apart.