Button Group
This is a pass through component from React-Bootstrap.
See React-Bootstrap for documentation.
Basic Usage
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: rgb(255 255 255 / 10%) !default;$btn-inverse-tertiary-active-bg: rgb(255 255 255 / 10%) !default;$btn-link-disabled-color: theme-color("gray", "light-text") !default;$btn-block-spacing-y: .5rem !default;// Allows for customizing button radius independently from global border radius$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;
ButtonGroup Props API
- aselementTypeDefault'div'Specifies element type for this component. 
- rolestringDefault'group'An ARIA role describing the button group. 
- sizeenum'sm' | 'md' | 'lg'Default'md'Specifies the size for all Buttons in the group. 
- toggleboolDefaultfalseDisplay as a button toggle group. 
- verticalboolDefaultfalseSpecifies if the set of Buttons should appear vertically stacked. 
- bsPrefixstringDefault'btn-group'Overrides underlying component base CSS class name 
ButtonToolbar Props API
- rolestringDefault'toolbar'An ARIA role describing the button group. 
- bsPrefixstringDefault'btn-toolbar'Overrides underlying component base CSS class name