Button Group
Leave feedbackThis 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.
ButtonToolbar
Show editable code example
Any Paragon component or export may be added to the code example.
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
elementTypeDefault'div'Specifies element type for this component.
- role
stringDefault'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
boolDefaultfalseDisplay as a button toggle group.
- vertical
boolDefaultfalseSpecifies if the set of Buttons should appear vertically stacked.
- bsPrefix
stringDefault'btn-group'Overrides underlying component base CSS class name
ButtonToolbar Props API
- role
stringDefault'toolbar'An ARIA role describing the button group.
- bsPrefix
stringDefault'btn-toolbar'Overrides underlying component base CSS class name
Usage Insights#
ButtonGroup
| Project Name | Paragon Version | Instance Count | |
|---|---|---|---|
| frontend-app-course-authoring | 20.35.1 | 1 | |
| frontend-lib-content-components | 20.45.0 | 2 |