Button Group

Stable v1.0.2

Groups multiple buttons together with shared borders and spacing, so they read as one connected control instead of a row of separate buttons.

Interactive Playground

Combine every prop live and copy the resulting code.

Orientation

Horizontal

Group Size (forces every child)

Individual (unset)

Live Source Code

<ButtonGroup>
  <Button label="One" severity="secondary" />
  <Button label="Two" severity="secondary" />
  <Button label="Three" severity="secondary" />
</ButtonGroup>

Horizontal Groups

Wrap multiple buttons to create unified toolbars. Borders, radiuses, and focus rings are managed automatically by the parent wrapper.

Template

<!-- Text and Icon Toolbar -->
<ButtonGroup>
  <Button label="Vessel List" icon="lucide:list" severity="secondary" />
  <Button label="Capacity Grid" icon="lucide:grid-2x2" severity="secondary" />
  <Button label="Route Map" icon="lucide:map" severity="secondary" />
</ButtonGroup>

<!-- Filter Toggles -->
<ButtonGroup>
  <Button label="Pending" variant="outline" severity="primary" />
  <Button label="In Transit" variant="solid" severity="primary" />
  <Button label="Arrived" variant="outline" severity="primary" />
</ButtonGroup>

Split Button Pattern

Create a split button by pairing an action button with an interactive DropDown menu. Note: Because the trigger is inside a slot, manual margin and radius adjustments are required.

Template

<ButtonGroup>
  <Button label="Confirm Booking" severity="primary" />

  <DropDown align="right" width="w-56">
    <template #trigger="{ isOpen }">
      <!-- Manual override required because trigger sits inside a slot hierarchy -->
      <Button
        :icon="isOpen ? 'lucide:chevron-down' : 'lucide:chevron-right'"
        severity="primary"
        class="px-2 !rounded-l-none -ml-px"
      />
    </template>

    <Button label="Include VAT Document" variant="text" severity="secondary" class="!justify-start w-full" />
  </DropDown>
</ButtonGroup>

Vertical Orientation

Stack buttons vertically using orientation="vertical". Ideal for sidebars, complex data tables, and management menus.

Quick Filters

Full Width (Block)

Template

<!-- Use !justify-start to align the button text to the left -->
<ButtonGroup orientation="vertical">
  <Button label="VesselRtExceed" icon="lucide:alert-circle" severity="secondary" class="!justify-start" />
  <Button label="Capacity Alerts" icon="lucide:bell" severity="secondary" class="!justify-start" />
</ButtonGroup>

<!-- Use w-full on the group and 'block' on the buttons to fill containers -->
<ButtonGroup orientation="vertical" class="w-full">
  <Button label="Vehicle Order Form" icon="lucide:file-signature" severity="secondary" class="!justify-start" block />
  <Button label="Land Item Quotation" icon="lucide:file-text" severity="secondary" class="!justify-start" block />
</ButtonGroup>

Group Sizing

The group layout adapts perfectly to whichever size prop you pass to the internal buttons.

Template

<ButtonGroup>
  <Button label="Small" size="sm" severity="secondary" />
  <Button label="Small" size="sm" severity="secondary" />
  <Button label="Small" size="sm" severity="secondary" />
</ButtonGroup>

API Reference

Props

Name	Type / Signature	Default	Description
orientation	"horizontal" \| "vertical"	"horizontal"	Stacks buttons side-by-side or top-to-bottom, merging adjacent borders and radii.
size	"xs" \| "sm" \| "md" \| "lg" \| "xl"	undefined	Forces every grouped Button to this size, overriding each child's own size prop. Leave unset to size buttons individually.

Slots

Slot Name	Exposed Bindings	Description
default	-	Place multiple Button components to be visually grouped.