Group

The built-in group tag — a flex row that lays its children out horizontally with consistent gaps. Usage, options (justify, align, gap, wrap, grow), and live examples.

{% group %} lays its children out in a horizontal row with a consistent gap — the everyday way to put buttons, badges, or chips side by side. It is a flex row: control where children sit on the main axis (justify), how they line up on the cross axis (align), the space between them (gap), whether they wrap (wrap), and whether they share the row width equally (grow). The block body is the content.

Use it as {% group %} in Markdown, or call it from Python logic (loops, snippets) via component('aardvark', 'group', …).

Basic row

With no options, children sit at the start of the row with the default md gap.

Justify (main axis)

justify sets justify-content — where the children sit along the row. Common values are flex-start (default), center, flex-end, space-between, and space-around.

Align (cross axis)

align sets align-items — how children line up across the row when they differ in height. Values include center (default), flex-start, flex-end, and stretch.

Gap

gap is the space between children — a Mantine size token (xs–xl) or any CSS value (8px, 2rem). The default is md.

Wrap

wrap sets flex-wrap. The default is wrap (children flow onto the next line when they run out of room); set wrap='nowrap' to force everything onto a single line.

Grow

grow (a bare flag) makes each child share the row width equally. By default preventGrowOverflow is on, so each child reserves an equal slice and a wide child can’t push the others around; set preventGrowOverflow='false' to let children size to their content.

With other components

group composes with any other tag. Here it puts a button and two badges on one line, pushed apart with justify='space-between'.

Attributes

CSS Selectors

Each group carries data-aardvark-island="Group" on its wrapper, and Mantine exposes its parts as mantine-Group-* classes — target either to style it from your theme CSS.

[data-aardvark-island="Group"] {
  /* style every group on the page */
}

.mantine-Group-root {
  /* the root part */
}

Injecting Attributes

attr={…} forwards raw HTML attributes (including event handlers) straight onto the rendered element.