Skip to content

Button Group

ButtonGroup Props ​

NameTypeDefaultDescription
labelstringrequiredAccessible name for the group.
orientation'horizontal' | 'vertical''horizontal'Connected direction and arrow-key navigation axis.
size'sm' | 'md' | 'lg''md'Default inherited by child buttons. An explicit child size wins.
elevation'none' | 'low' | 'med' | 'high''none'Shadow depth for the connected surface.
isDisabledbooleanfalseDisables every Button and IconButton in the group.

Slot ​

ButtonGroup receives Button or IconButton through its required default slot.

Keyboard navigation ​

KeyBehavior
Left and Right ArrowMove focus within a horizontal group.
Up and Down ArrowMove focus within a vertical group.
HomeFocus the first available button.
EndFocus the last available button.
  • Keyboard navigation skips disabled buttons.
  • Right-to-left horizontal layouts reverse the Left and Right Arrow behavior.

Template ref ​

ButtonGroup exposes element. Its type is HTMLDivElement | null.

Native attributes ​

The root element receives:

  • HTML attributes.
  • aria-* attributes.
  • data-* attributes.
  • class.
  • style.
  • Native event listeners.