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: 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;// 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
- as
elementType
Default'div'Specifies element type for this component.
- role
string
Default'group'An ARIA role describing the button group.
- size
enum
'sm' | 'md' | 'lg'Default'md'Specifies the size for all Buttons in the group.
- toggle
bool
DefaultfalseDisplay as a button toggle group.
- vertical
bool
DefaultfalseSpecifies if the set of Buttons should appear vertically stacked.
- bsPrefix
string
Default'btn-group'Overrides underlying component base CSS class name
ButtonToolbar Props API
- role
string
Default'toolbar'An ARIA role describing the button group.
- bsPrefix
string
Default'btn-toolbar'Overrides underlying component base CSS class name