ButtonGroup
This 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
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
Usage Insights#
ButtonGroup
Project Name | Paragon Version | Instance Count | |
---|---|---|---|
frontend-app-course-authoring | 20.46.2 | 2 | |
frontend-app-library-authoring | 21.5.6 | 1 | |
frontend-lib-content-components | 21.5.6 | 2 |