Theme

npm_versionnpm Paragon package page

This is a pass through component from React-Bootstrap.
See React-Bootstrap for documentation.

Basic Usage

Any Paragon component or export may be added to the code example.

ButtonToolbar

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

    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'

Usage Insights#

ButtonGroup

Project NameParagon VersionInstance Count
frontend-app-course-authoring20.46.22
frontend-app-library-authoring21.5.61
frontend-lib-content-components21.5.62