Paragon Design System

Technical Documentation

npm_version
Changelog
GitHub

Button

This component utilizes Button from React-Bootstrap and extends it with an ability to add icons before and after button label, see below for usage example.
See React-Bootstrap for additional documentation.

Core Buttons

Core Buttons (Inverse Pallete)

Utility Buttons

Size

When to use the inline size

Use inline size buttons for when a button sits with a line of text.

Block Buttons

With Icons before or after

With a Spinner

Button/Deprecated

Basic Usage

Color Variants

Outline Variants

Inverse Variants

Link Variant

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;
Button Props API
  • buttonType
    string

    Used to determine the type of button to be rendered. See Bootstrap's buttons documentation for a list of applicable button types. For example, buttonType="light". The default is undefined.

  • className
    string

    Specifies Bootstrap class names to apply to the button. See Bootstrap's buttons documentation for a list of applicable class names. The default is an empty array.

  • children
    node Required

    Specifies the text that is displayed within the button.

  • inputRef
    func | shape {
    current: PropTypes.element,
    }

    A function that defines a reference for the button. An example inputRef from the calling component could look something like: inputRef={(input) => { this.button = input; }}. The default is an empty function.

    Default() => {}
  • isClose
    bool

    Used to determine if the button is a "Close" style button to leverage bootstrap styling. Example use case is with the Status Alert dismiss button. The default is false.

    Defaultfalse
  • onBlur
    func

    A function that would specify what the button should do when the onBlur event is triggered. For example, the button could change in color or buttonType when focus is changed. The default is an empty function.

    Default() => {}
  • onClick
    func

    A function that would specify what the button should do when the onClick event is triggered. For example, the button could launch a Modal. The default is an empty function.

    Default() => {}
  • onKeyDown
    func

    A function that would specify what the button should do when the onKeyDown event is triggered. For example, this could handle using the Escape key to trigger the button's action. The default is an empty function.

    Default() => {}
  • type
    string

    Used to set the type attribute on the button tag. The default type is button.

    Default'button'

Contents

Guides

Foundations

Components

Buttonlike
Choreography
Content
Forms
Forms (deprecated)
Hooks
Imagery & Iconography
Layout
Navigation
Overlays
Status & metadata
Table

All components (A-Z)