Button groups

    Group a series of buttons together on a single line with the button group.

    Basic example

    Wrap a series of \<Button>s in a <ButtonGroup>.

    Press esc to disable tab trapping

    Button toolbar

    Combine sets of <ButtonGroup>s into a <ButtonToolbar> for more complex components.

    Press esc to disable tab trapping

    Feel free to mix input groups with button groups in your toolbars. Similar to the example above, you’ll likely need some utilities though to space things properly.

    Press esc to disable tab trapping

    Sizing

    Instead of applying button sizing props to every button in a group, just add size prop to the <ButtonGroup>.

    Press esc to disable tab trapping

    Nesting

    You can place other button types within the <ButtonGroup> like <DropdownButton>s.

    Press esc to disable tab trapping

    Vertical variation

    Make a set of buttons appear vertically stacked rather than horizontally, by adding vertical to the <ButtonGroup>. Split button dropdowns are not supported here.

    Press esc to disable tab trapping

    API

    import ButtonGroup from 'react-bootstrap/ButtonGroup'
    NameTypeDefaultDescription
    as
    elementType

    You can use a custom element type for this component.

    role
    string
    'group'

    An ARIA role describing the button group. Usually the default "group" role is fine. An aria-label or aria-labelledby prop is also recommended.

    size
    'sm' | 'lg'

    Sets the size for all Buttons in the group.

    toggle
    boolean
    false

    Display as a button toggle group.

    (Generally it's better to use ToggleButtonGroup directly)

    vertical
    boolean
    false

    Make the set of Buttons appear vertically stacked.

    bsPrefix
    string
    'btn-group'

    Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css.

    ButtonToolbarview source file

    import ButtonToolbar from 'react-bootstrap/ButtonToolbar'
    NameTypeDefaultDescription
    role
    string
    'toolbar'

    The ARIA role describing the button toolbar. Generally the default "toolbar" role is correct. An aria-label or aria-labelledby prop is also recommended.

    bsPrefix
    string
    'btn-toolbar'

    Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css.