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 React.ElementType
Specifies element type for this component.
role React.AriaRole
An ARIA role describing the button group (default: group).
size 'sm' | 'md' | 'lg' | 'inline'
Specifies the size for all Buttons in the group (default: md).
Default'md'
toggle boolean
Display as a button toggle group (default: false).
vertical boolean
Specifies if the set of Buttons should appear vertically stacked (default: false).
bsPrefix string
Overrides underlying component base CSS class name (default: btn-group).

ButtonToolbar Props API

role React.AriaRole
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

ButtonGroup

Basic Usage

ButtonToolbar

Theme Variables#

Props API#

Usage Insights#

ButtonGroup

All components (A-Z)

ButtonGroup

Basic Usage#

ButtonToolbar#

Theme Variables#

Props API#

Usage Insights#

ButtonGroup

All components (A-Z)

Basic Usage

ButtonToolbar