Paragon Design System

Technical Documentation

Theme

PlaygroundBeta

npm_versionnpm Paragon package page

Button Group

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

Basic Usage

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>

</>

ButtonToolbar

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>

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 NameParagon VersionInstance Count
frontend-lib-content-components20.34.02
Leave feedback

Contents

All components (A-Z)