Skip to content
← Inventory

Group

Horizontal flex container for grouping related elements with consistent spacing.

ConcreteTerrazzoOakBrassLinen

Usage

import { Group, GroupProps } from "@desk/ui/components/group";

Best practices

  • Group is a horizontal cluster of related controls (buttons, chips) that can wrap; for a vertical stack use Stack, for full flex control use Flex.

  • Control horizontal distribution with position (its justify prop) and vertical alignment with align; both gap and wrap accept per-breakpoint objects.

Props

PropTypeDefaultDescription
alignResponsiveValue<FlexAlign>

Align items (vertical alignment). Can be responsive.

gapResponsiveValue<"base" | "none" | "2xs" | "xs" | "sm" | "lg" | "xl" | "2xl" | "3xl" | "3xs">

Gap between items. Can be responsive.

positionResponsiveValue<FlexJustify>

Justify content (horizontal alignment). Can be responsive.

responsiveModeResponsiveMode

Responsive mode: "screen" (viewport) or "container" (container queries).

wrapResponsiveValue<boolean>

Allow items to wrap. Can be responsive.

Also exports

  • interfaceGroupProps