Button Group

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 (SCSS)#

$btn-padding-y:                $input-btn-padding-y !default;
$btn-padding-x:                $input-btn-padding-x !default;
$btn-font-family:              $input-btn-font-family !default;
$btn-font-size:                $input-btn-font-size !default;
$btn-line-height:              $input-btn-line-height !default;
$btn-padding-y-sm:             $input-btn-padding-y-sm !default;
$btn-padding-x-sm:             $input-btn-padding-x-sm !default;
$btn-font-size-sm:             $input-btn-font-size-sm !default;
$btn-line-height-sm:           $input-btn-line-height-sm !default;
$btn-padding-y-lg:             $input-btn-padding-y-lg !default;
$btn-padding-x-lg:             $input-btn-padding-x-lg !default;
$btn-font-size-lg:             $input-btn-font-size-lg !default;
$btn-line-height-lg:           $input-btn-line-height-lg !default;
$btn-border-width:             $input-btn-border-width !default;
$btn-font-weight:              $font-weight-normal !default;
$btn-box-shadow:               inset 0 1px 0 rgba($white, .15), 0 1px 1px rgba($black, .075) !default;
$btn-focus-width:              2px !default;
$btn-focus-gap:                1px !default;
$btn-focus-box-shadow:         $input-btn-focus-box-shadow !default;
$btn-disabled-opacity:         .65 !default;
$btn-active-box-shadow:        none;
$btn-tertiary-color:           $gray-700 !default;
$btn-tertiary-bg:              transparent !default;
$btn-tertiary-hover-bg:        $light-500 !default;
$btn-tertiary-active-bg:       $light-500 !default;
$btn-inverse-tertiary-color:           $white !default;
$btn-inverse-tertiary-bg:              transparent !default;
$btn-inverse-tertiary-hover-bg:        rgba(255, 255, 255, .1) !default;
$btn-inverse-tertiary-active-bg:       rgba(255, 255, 255, .1) !default;
$btn-link-disabled-color:      theme-color("gray", "light-text") !default;
$btn-block-spacing-y:          .5rem !default;
$btn-border-radius:            $border-radius !default;
$btn-border-radius-lg:         $border-radius-lg !default;
$btn-border-radius-sm:         $border-radius-sm !default;
$btn-transition:  null;
$btn-focus-border-gap:  $btn-focus-width + $btn-focus-gap !default;
$btn-focus-distance-to-border:  $btn-focus-border-gap + $btn-border-width !default;
$btn-focus-border-radius:  calc(#{$btn-border-radius} + #{$btn-focus-border-gap}) !default;

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'
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-lib-content-components	20.32.0	2

Paragon Design System

Theme

PlaygroundBeta

Button Group

Basic Usage

ButtonToolbar

Theme Variables (SCSS)#

Props API#

Usage Insights#

ButtonGroup

All components (A-Z)

Theme

PlaygroundBeta

Button Group

Basic Usage#

ButtonToolbar#

Theme Variables (SCSS)#

Props API#

Usage Insights#

ButtonGroup

All components (A-Z)

Basic Usage

ButtonToolbar