Group

A layout component for grouping related elements together, with options for attached styling (seamless borders) and equal-width distribution.

Anatomy

<script>
  import { Group } from "@saas-ui/svelte/layout/group";
  import { Button } from "@saas-ui/svelte/components/button";
</script>

<!-- Spaced group -->
<Group>
  <Button>One</Button>
  <Button>Two</Button>
</Group>

<!-- Attached group -->
<Group attached>
  <Button>One</Button>
  <Button>Two</Button>
</Group>

Examples

Attached Accessibility

Use attached prop to join elements seamlessly with connected borders, ideal for segmented controls.

<div class="flex justify-center">
	<VStack gap={4}>
		<Group attached>
			<Button variant="outline">Item 1</Button>
			<Button variant="outline">Item 2</Button>
		</Group>

		<Group attached>
			<Badge variant="solid" colour="purple">Commit status</Badge>
			<Badge variant="solid" colour="green">90+</Badge>
		</Group>
	</VStack>
</div>

Basic Accessibility

Basic group with default gap between items arranged horizontally.

<div class="flex justify-center">
	<Group>
		<DecorativeBox class="h-20 w-40!">1</DecorativeBox>
		<DecorativeBox class="h-20 w-40!">2</DecorativeBox>
	</Group>
</div>

Grow Accessibility

Use grow prop to make all items expand equally to fill the available container width.

<div class="flex w-full justify-center">
	<div class="w-full max-w-(--sizes-md)">
		<Group grow>
			<Button variant="outline">First</Button>
			<Button variant="outline">Second</Button>
			<Button variant="outline">Third</Button>
		</Group>
	</div>
</div>

With Buttons Accessibility

Common use case showing buttons grouped together with consistent spacing.

<div class="flex justify-center">
	<Group>
		<Button variant="outline">Item 1</Button>
		<Button variant="outline">Item 2</Button>
	</Group>
</div>

Props

Prop	Type	Default	Description
`attached`	`boolean`	`false`	If `true`, the elements will be attached together.
`grow`	`boolean`	`false`	If `true`, the elements will grow to fill the available space.
`orientation`	`vertical \| horizontal`	`horizontal`	The orientation of the group.
`class`	`text`	-	Additional CSS classes to apply.
`children`	`any`	-	The content to be rendered inside the component.