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
  • 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'