General

FieldGroup

Group related buttons and form elements together with connected borders and shared sizing.

Playground

Experiment with different props in real-time.

Orientation

Size

Button Variant

Button Count

Basic Usage

Wrap buttons in a FieldGroup to connect them visually.

<script lang="ts">
  import { FieldGroup, Button } from 'sv5ui';
</script>

<FieldGroup>
  <Button variant="outline" label="Left" />
  <Button variant="outline" label="Center" />
  <Button variant="outline" label="Right" />
</FieldGroup>

Orientation

Stack buttons horizontally or vertically.

<!-- Horizontal (default) -->
<FieldGroup orientation="horizontal">
  <Button variant="outline" label="Left" />
  <Button variant="outline" label="Center" />
  <Button variant="outline" label="Right" />
</FieldGroup>

<!-- Vertical -->
<FieldGroup orientation="vertical">
  <Button variant="outline" label="Top" />
  <Button variant="outline" label="Middle" />
  <Button variant="outline" label="Bottom" />
</FieldGroup>

Sizes

The group's size prop applies to all child buttons.

<FieldGroup size="sm">
  <Button variant="outline" label="Small" />
  <Button variant="outline" label="Group" />
</FieldGroup>

<FieldGroup size="md">
  <Button variant="outline" label="Medium" />
  <Button variant="outline" label="Group" />
</FieldGroup>

<FieldGroup size="lg">
  <Button variant="outline" label="Large" />
  <Button variant="outline" label="Group" />
</FieldGroup>

Button Variants

Works with all button variants.

<FieldGroup>
  <Button variant="solid" label="Solid" />
  <Button variant="solid" label="Group" />
</FieldGroup>

<FieldGroup>
  <Button variant="outline" label="Outline" />
  <Button variant="outline" label="Group" />
</FieldGroup>

<FieldGroup>
  <Button variant="soft" label="Soft" />
  <Button variant="soft" label="Group" />
</FieldGroup>

Icon Groups

Create toolbar-style groups with icon-only buttons.

<FieldGroup>
  <Button variant="outline" icon="lucide:bold" />
  <Button variant="outline" icon="lucide:italic" />
  <Button variant="outline" icon="lucide:underline" />
  <Button variant="outline" icon="lucide:strikethrough" />
</FieldGroup>

<FieldGroup>
  <Button variant="outline" icon="lucide:align-left" />
  <Button variant="outline" icon="lucide:align-center" />
  <Button variant="outline" icon="lucide:align-right" />
  <Button variant="outline" icon="lucide:align-justify" />
</FieldGroup>

Mixed Buttons

Combine different button variants and styles within a group.

<FieldGroup>
  <Button variant="solid" leadingIcon="lucide:save" label="Save" />
  <Button variant="outline" icon="lucide:chevron-down" />
</FieldGroup>

<FieldGroup>
  <Button variant="outline" label="Main Action" />
  <Button variant="outline" label="Option A" />
  <Button variant="outline" label="Option B" />
  <Button variant="solid" label="Confirm" />
</FieldGroup>

UI Slots

Use the ui prop to override classes on internal elements.

Slot	Description
`root`	Root container element — controls layout, spacing, alignment

Props

Prop	Type	Default
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`
`size`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	`'md'`
`as`	`keyof HTMLElementTagNameMap`	`'div'`
`class`	`string`	`-`
`ui`	`Record<Slot, Class>`	`-`

Button Icon