ButtonGroup

Button

Grouped button layout with shared borders, orientation control, and seamless visual connection between actions

Horizontal Groups

Vertical Groups

Sizes & Full Width

Contextual Usage

Confirm Action

Are you sure you want to proceed?

Usage Guidelines

When to Use

  • Related actions
  • Toolbar buttons
  • Toggle options

Accessibility

  • Grouped buttons semantics
  • Focus navigation between buttons

Performance

  • Minimal wrapper DOM
  • CSS-only grouping styles

Common Mistakes

  • Mixing different button sizes
  • Too many buttons in group

Frequently Asked Questions

ButtonGroup displays multiple related buttons with shared borders and seamless visual connection.
Yes, ButtonGroup can be horizontal or vertical.

View on GitHub

See the full source code on GitHub

Related Components

View all
Button

Primary action component with variant system, size options, loading states, icon slots, and optional shimmer effects

FloatingActionButton

Fixed-position FAB for primary screen actions with animation, positioning options, and extended label support

IconButton

Icon-only button with size variants, accessibility labels, and interaction states

PlayButton

Specialized media control button with play/pause state visualization and audio-visual feedback

Previous

Breadcrumb

Next

Calendar