Button Group
Joins multiple buttons into one visual unit with shared borders and collapsed radii. Supports horizontal and vertical orientations.
<arc-button-group>Overview
ButtonGroup joins adjacent buttons into a connected strip where inner border radii are removed and outer buttons retain rounded corners. The group reads as a single control while each button stays independently clickable.
The component 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, so you don't set them individually. Changing one prop swaps the whole group between ghost, outline, and solid styles.
Guidelines
When to use
- Use for related actions that belong together, such as 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
- 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
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
variantstring''- Button variant cascaded to all children (e.g., "ghost", "outline").
orientation'horizontal' | 'vertical''horizontal'- Layout direction. Vertical stacks buttons top-to-bottom.
size'sm' | 'md' | 'lg''md'- Size cascaded to all child buttons.
See Also
- ButtonPrimary call-to-action element with three visual variants that map to action hierarchy. Supports prefix and suffix slots for icons. Renders as an anchor when given an href, for navigation actions on landing pages, toolbars, and forms.
- Icon ButtonCompact button that renders an icon with optional text label, supporting ghost, secondary, and primary variants.
- ToolbarHorizontal toolbar with prefix, center, and suffix slots.
- Segmented ControlA radio-group-style toggle bar that renders slotted arc-option elements as a row of mutually exclusive buttons with an active highlight.