ButtonGroup

This is a pass through component from React-Bootstrap.
See React-Bootstrap for documentation.

Basic Usage

Show editable code example

Any Paragon component or export may be added to the code example.

<>
  <ButtonGroup size="lg" className="mb-2">
    <Button variant="primary">Left</Button>
    <Button variant="primary">Middle</Button>
    <Button variant="primary">Right</Button>
  </ButtonGroup>
  <br />
  <ButtonGroup className="mb-2">
    <Button variant="primary">Left</Button>
    <Button variant="primary">Middle</Button>
    <Button variant="primary">Right</Button>
  </ButtonGroup>
  <br />
  <ButtonGroup size="sm">
    <Button variant="primary">Left</Button>
    <Button variant="primary">Middle</Button>
    <Button variant="primary">Right</Button>
  </ButtonGroup>
</>

<>
  <ButtonGroup size="lg" className="mb-2">
    <Button variant="primary">Left</Button>
    <Button variant="primary">Middle</Button>
    <Button variant="primary">Right</Button>
  </ButtonGroup>
  <br />
  <ButtonGroup className="mb-2">
    <Button variant="primary">Left</Button>
    <Button variant="primary">Middle</Button>
    <Button variant="primary">Right</Button>
  </ButtonGroup>
  <br />
  <ButtonGroup size="sm">
    <Button variant="primary">Left</Button>
    <Button variant="primary">Middle</Button>
    <Button variant="primary">Right</Button>
  </ButtonGroup>
</>

ButtonToolbar

Show editable code example

Any Paragon component or export may be added to the code example.

<ButtonToolbar aria-label="Toolbar with button groups">
  <ButtonGroup className="mie-2" aria-label="First group">
    <Button variant="primary">1</Button>
    <Button variant="primary">2</Button>
    <Button variant="primary">3</Button>
    <Button variant="primary">4</Button>
  </ButtonGroup>
  <ButtonGroup className="mie-2" aria-label="Second group">
    <Button variant="primary">5</Button>
    <Button variant="primary">6</Button>
    <Button variant="primary">7</Button>
  </ButtonGroup>
  <ButtonGroup aria-label="Third group">
    <Button variant="primary">8</Button>
  </ButtonGroup>
</ButtonToolbar>

<ButtonToolbar aria-label="Toolbar with button groups">
  <ButtonGroup className="mie-2" aria-label="First group">
    <Button variant="primary">1</Button>
    <Button variant="primary">2</Button>
    <Button variant="primary">3</Button>
    <Button variant="primary">4</Button>
  </ButtonGroup>
  <ButtonGroup className="mie-2" aria-label="Second group">
    <Button variant="primary">5</Button>
    <Button variant="primary">6</Button>
    <Button variant="primary">7</Button>
  </ButtonGroup>
  <ButtonGroup aria-label="Third group">
    <Button variant="primary">8</Button>
  </ButtonGroup>
</ButtonToolbar>

Theme Variables#

CSS Variable	Computed Value
‌	‌
‌	‌
‌	‌
‌	‌
‌	‌

Props API#

ButtonGroup Props API

as elementType
Specifies element type for this component.
Default'div'
role string
An ARIA role describing the button group.
Default'group'
size enum'sm' | 'md' | 'lg' | 'inline'
Specifies the size for all Buttons in the group.
Default'md'
toggle bool
Display as a button toggle group.
Defaultfalse
vertical bool
Specifies if the set of Buttons should appear vertically stacked.
Defaultfalse
bsPrefix string
Overrides underlying component base CSS class name
Default'btn-group'

ButtonToolbar Props API

role string
An ARIA role describing the button group.
Default'toolbar'
bsPrefix string
Overrides underlying component base CSS class name
Default'btn-toolbar'

Usage Insights#

ButtonGroup

	Project Name	Paragon Version	Instance Count
	frontend-app-course-authoring	22.8.1	4
	frontend-app-library-authoring	21.11.3	1

Edit this page Leave feedback

Paragon Design System

Theme

ButtonGroup

Basic Usage

ButtonToolbar

Theme Variables#

Props API#

Usage Insights#

ButtonGroup

All components (A-Z)

Theme

ButtonGroup

Basic Usage#

ButtonToolbar#

Theme Variables#

Props API#

Usage Insights#

ButtonGroup

All components (A-Z)

Basic Usage

ButtonToolbar