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>.

    Button toolbar

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

    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.

    Sizing

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



    Nesting

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

    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.

    API

    import ButtonGroup from 'react-bootstrap/ButtonGroup'Copy import code for the ButtonGroup component
    NameTypeDefaultDescription
    as
    elementType
    <div>

    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.

    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'Copy import code for the ButtonToolbar component
    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.