ButtonGroup

Open in Playground

Joins Buttons into one bar with shared borders. Mark the active one with a different variant, or use aria-pressed for a toggle group; the hovered, focused and pressed button rises above its neighbours so its border stays whole. Give the group an aria-label that says what the buttons have in common.

orientation="vertical" stacks them, fullWidth stretches the group and shares the space equally, and attached={false} keeps a gap between the buttons.

Props

  • orientation'horizontal' | 'vertical'
    Default: 'horizontal'

    Lay the buttons out in a row or a column.

  • attachedboolean
    Default: true

    Share borders between the buttons; false keeps a small gap.

  • fullWidthboolean
    Default: false

    Stretch the group and share the space equally.

  • aria-labelstring

    What the buttons have in common (the group is a role="group").

  • classNamestring
    Default: ''

    Extra classes for the root element.

  • childrenReactNode

    Content.

  • ...rest

    Any other props are passed to the underlying element.