Group

Layout

Horizontal flex row with gap and optional wrapping.

Horizontal counterpart to Stack. Children are laid out in a row with configurable gap. grow makes children fill available space equally.

Usage

import { Group } from "nosible-ux"
import { Button } from "nosible-ux"

export default function Example() {
  return (
    <Group>
      <Button intent="ghost">Cancel</Button>
      <Button intent="primary">Save changes</Button>
    </Group>
  )
}

Examples

Grow children

Justify between

47 signals

Props

Name	Type	Default	Description
`align`	`GroupAlign \| undefined`	—	Cross-axis alignment (align-items). Default: 'center'.
`asChild`	`boolean \| undefined`	—	When true, merges Group styles onto the child element instead of a wrapper div.
`gap`	`number \| "xs" \| "sm" \| "md" \| "lg" \| "xl" \| undefined`	—	Gap between children. Accepts a pixel number or a design token ('xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'), where xs=8 sm=12 md=20 lg=32 xl=48. Default: 20 (base grid).
`grow`	`boolean \| undefined`	—	When true, each child grows to fill available space equally (flex: 1 on each child). Default: false.
`justify`	`GroupJustify \| undefined`	—	Main-axis justification (justify-content). Default: 'start'.
`preventGrowOverflow`	`boolean \| undefined`	—	When grow is true, prevents children from overflowing their container by applying minWidth: 0 to each child. Default: false.
`wrap`	`boolean \| undefined`	—	Allow children to wrap onto multiple lines. Default: true.

← All Components Getting Started →