Button Group — ARC UI

Components

Button Group

input

hybrid

<arc-button-group>

Overview

Guidelines

When to use

Use for related actions that belong together — e.g., text alignment (Left, Center, Right)
Keep button groups to 2-5 items for readability
Use the vertical orientation for stacked toolbar controls
Set variant on the group instead of individual buttons for consistency

When not to use

Mix different button sizes inside a group — use the group `size` prop
Use button groups for navigation — use tabs or segmented control instead
Put destructive actions in the same group as constructive ones without clear visual separation

Features

Automatic border radius management — outer corners rounded, inner corners flat
Collapsed -1px margins to prevent double borders between items
Horizontal and vertical orientations
Cascades `size` and `variant` props to all child buttons
Semantic `role="group"` container
Works with arc-button, arc-icon-button, or any slotted children
Exposed CSS part: group

Preview

Left

Center

Right

Top

Middle

Bottom

Usage

Layout and styling work without JavaScript via the HTML/CSS versions. Interactive features like events and state management require the Web Component or a framework wrapper.

<arc-button-group>
  <arc-button variant="ghost">Left</arc-button>
  <arc-button variant="ghost">Center</arc-button>
  <arc-button variant="ghost">Right</arc-button>
</arc-button-group>

<!-- Vertical -->
<arc-button-group orientation="vertical" size="sm">
  <arc-button variant="ghost">Top</arc-button>
  <arc-button variant="ghost">Bottom</arc-button>
</arc-button-group>

import { ButtonGroup, Button } from '@arclux/arc-ui-react';

<ButtonGroup>
  <Button variant="ghost">Left</Button>
  <Button variant="ghost">Center</Button>
  <Button variant="ghost">Right</Button>
</ButtonGroup>

<script setup>
import { ButtonGroup, Button } from '@arclux/arc-ui-vue';
</script>

<template>
  <ButtonGroup>
    <Button variant="ghost">Left</Button>
    <Button variant="ghost">Center</Button>
    <Button variant="ghost">Right</Button>
  </ButtonGroup>
</template>

<script>
  import { ButtonGroup, Button } from '@arclux/arc-ui-svelte';
</script>

<ButtonGroup>
  <Button variant="ghost">Left</Button>
  <Button variant="ghost">Center</Button>
  <Button variant="ghost">Right</Button>
</ButtonGroup>

import { Component } from '@angular/core';
import { ButtonGroup, Button } from '@arclux/arc-ui-angular';

@Component({
  imports: [ButtonGroup, Button],
  template: `
    <ButtonGroup>
      <Button variant="ghost">Left</Button>
      <Button variant="ghost">Center</Button>
      <Button variant="ghost">Right</Button>
    </ButtonGroup>
  `,
})
export class ToolbarComponent {}

import { ButtonGroup, Button } from '@arclux/arc-ui-solid';

<ButtonGroup>
  <Button variant="ghost">Left</Button>
  <Button variant="ghost">Center</Button>
  <Button variant="ghost">Right</Button>
</ButtonGroup>

import { ButtonGroup, Button } from '@arclux/arc-ui-preact';

<ButtonGroup>
  <Button variant="ghost">Left</Button>
  <Button variant="ghost">Center</Button>
  <Button variant="ghost">Right</Button>
</ButtonGroup>

<!-- Auto-generated by @arclux/prism — do not edit manually -->
<!-- arc-button-group — requires button-group.css + base.css (or arc-ui.css) -->
<div class="arc-button-group">
  <div class="button-group" role="group">
    <!-- buttons here -->
  </div>
</div>

<!-- Auto-generated by @arclux/prism — do not edit manually -->
<div style="display: inline-flex">
  <div style="display: inline-flex; border-radius: 10px; overflow: hidden;" role="group">
    <!-- buttons here -->
  </div>
</div>

API

Prop	Type	Default	Description
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	Layout direction. Vertical stacks buttons top-to-bottom.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Size cascaded to all child buttons.
`variant`	`string`	`''`	Button variant cascaded to all children (e.g., "ghost", "outline").