Getting StartedComponentsDesign TokensThemingTheme SynthesizerFrameworksAccessibilityUtilitiesServer RenderingBrowser SupportContributingChangelog App ShellAspect GridAuth ShellCenterClusterContainerDashboard GridDockFloat BarInsetMasonryPage HeaderPage LayoutResizableResponsive SwitcherSectionSettings LayoutSplit PaneStatus BarStickyToolbar Anchor NavBottom NavBreadcrumbBreadcrumb MenuCommand BarDrawerFooterLinkMenubarNavigation MenuPage IndicatorPaginationRailScroll IndicatorScroll SpyScroll To TopSidebarSkip LinkSpeed DialStepper NavTabsTop BarTree View AccordionAspect RatioAvatarAvatar GroupCalloutCardCarouselCollapsibleColor SwatchCTA BannerDividerEmpty StateFeature CardIconImageImage CompareImage HotspotsInfinite ScrollLightboxMarqueeQR CodeScroll AreaSeparatorSkeletonSpinnerStackVideoVirtual List Activity HeatmapAnimated NumberBadgeChartClockComparisonCountdown TimerData GridData TableDescription ListDiffEvent CalendarGaugeJSON TreeKanbanKey ValueLevel MeterListMeterSparklineStatStepperTableTagTimelineUptimeValue CardWaveform BlockquoteCode BlockGradient TextHighlightKbdKeyboard MapMarkdownNumber FormatProseTerminalTextTime AgoTruncateTypewriter ButtonButton GroupCalendarCheckboxChipColor PickerComboboxCopy ButtonDate PickerDate Range PickerFieldsetFile UploadFormHotkeyIcon ButtonImage CropperInline EditInputInput GroupKnobLabelMasked InputMulti SelectNumber InputOTP InputPassword InputPin InputRadio GroupRange SliderRatingSearchSegmented ControlSelectSignature PadSliderSortable ListSwitch GroupTag InputTextareaTheme ToggleTime PickerToggleTransfer ListTree Select AlertAnnouncementBannerCommand PaletteConfirmConnection StatusContext MenuConversationDialogDropdown MenuGuided TourHover CardInline MessageLoading OverlayModalNotification PanelPopoverProgressProgress ToastSheetSnackbarSpotlightToastTooltip
ARC UI ARC Radiant Components
v3.2 Docs Components Tokens Synthesizer
Getting StartedFrameworksServer Rendering Design TokensThemingTheme SynthesizerTypographyUtilities All ComponentsAccessibilityBrowser SupportChangelogContributingStats App ShellAspect GridAuth ShellCenterClusterContainerDashboard GridDockFloat BarInsetMasonryPage HeaderPage LayoutResizableResponsive SwitcherSectionSettings LayoutSplit PaneStatus BarStickyToolbar Anchor NavBottom NavBreadcrumbBreadcrumb MenuCommand BarDrawerFooterLinkMenubarNavigation MenuPage IndicatorPaginationRailScroll IndicatorScroll SpyScroll To TopSidebarSkip LinkSpeed DialStepper NavTabsTop BarTree View AccordionAspect RatioAvatarAvatar GroupCalloutCardCarouselCollapsibleColor SwatchCTA BannerDividerEmpty StateFeature CardIconImageImage CompareImage HotspotsInfinite ScrollLightboxMarqueeQR CodeScroll AreaSeparatorSkeletonSpinnerStackVideoVirtual List Activity HeatmapAnimated NumberBadgeChartClockComparisonCountdown TimerData GridData TableDescription ListDiffEvent CalendarGaugeJSON TreeKanbanKey ValueLevel MeterListMeterSparklineStatStepperTableTagTimelineUptimeValue CardWaveform BlockquoteCode BlockGradient TextHighlightKbdKeyboard MapMarkdownNumber FormatProseTerminalTextTime AgoTruncateTypewriter ButtonButton GroupCalendarCheckboxChipColor PickerComboboxCopy ButtonDate PickerDate Range PickerFieldsetFile UploadFormHotkeyIcon ButtonImage CropperInline EditInputInput GroupKnobLabelMasked InputMulti SelectNumber InputOTP InputPassword InputPin InputRadio GroupRange SliderRatingSearchSegmented ControlSelectSignature PadSliderSortable ListSwitch GroupTag InputTextareaTheme ToggleTime PickerToggleTransfer ListTree Select AlertAnnouncementBannerCommand PaletteConfirmConnection StatusContext MenuConversationDialogDropdown MenuGuided TourHover CardInline MessageLoading OverlayModalNotification PanelPopoverProgressProgress ToastSheetSnackbarSpotlightToastTooltip

Button Group

Connects multiple buttons into a single visual unit with shared borders and collapsed radii. Supports horizontal and vertical orientations.

Components Button Group
input hybrid
<arc-button-group>

Overview

ButtonGroup joins adjacent buttons into a connected strip where inner border radii are removed and outer buttons retain rounded corners. This creates a unified control that reads as a single element while each button remains independently clickable. The component automatically overrides the border-radius CSS custom properties on slotted children, giving the first and last child outer radii while removing inner radii. Margins between items are collapsed by -1px to prevent double borders. Both horizontal (default) and vertical orientations are supported. The `size` and `variant` props cascade to all child buttons, ensuring consistent sizing and style across the group without setting them individually. This makes it easy to swap the entire group between ghost, outline, and solid styles by changing a single prop.

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

  • Do not mix different button sizes inside a group — use the group `size` prop
  • Do not use button groups for navigation — use tabs or segmented control instead
  • Do not 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';

export default function Example() {
  return (
    <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: `
    <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>
  `,
})
export class ToolbarComponent {}
 
import { ButtonGroup, Button } from '@arclux/arc-ui-solid';

export default function Example() {
  return (
    <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';

export default function Example() {
  return (
    <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

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").

See Also
ARC UI

Components that glow. One Lit source, seven native targets.

Docs

Project

Arclight

© 2026 Arclight Digital, LLC. All rights reserved.

Documentation generated with AI assistance and reviewed by humans. Found an issue? Open a GitHub issue.

Privacy Policy