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

<>
  <Button variant="brand" className="mb-2 mb-sm-0">Brand</Button>{' '}
  <Button variant="outline-brand" className="mb-2 mb-sm-0">Outline Brand</Button>{' '}
  <Button variant="primary" className="mb-2 mb-sm-0">Primary</Button>{' '}
  <Button variant="outline-primary" className="mb-2 mb-sm-0">Outline Primary</Button>{' '}
  <Button variant="tertiary" className="mb-2 mb-sm-0">Tertiary</Button>{' '}
</>

<>
  <Button variant="brand" className="mb-2 mb-sm-0">Brand</Button>{' '}
  <Button variant="outline-brand" className="mb-2 mb-sm-0">Outline Brand</Button>{' '}
  <Button variant="primary" className="mb-2 mb-sm-0">Primary</Button>{' '}
  <Button variant="outline-primary" className="mb-2 mb-sm-0">Outline Primary</Button>{' '}
  <Button variant="tertiary" className="mb-2 mb-sm-0">Tertiary</Button>{' '}
</>

Core Buttons (Inverse Pallete)

<div className="bg-dark-700 p-4">
  <Button variant="inverse-brand" className="mb-2 mb-sm-0">Brand</Button>{' '}
  <Button variant="inverse-outline-brand" className="mb-2 mb-sm-0">Outline Brand</Button>{' '}
  <Button variant="inverse-primary" className="mb-2 mb-sm-0">Primary</Button>{' '}
  <Button variant="inverse-outline-primary" className="mb-2 mb-sm-0">Outline Primary</Button>{' '}
  <Button variant="inverse-tertiary" className="mb-2 mb-sm-0">Tertiary</Button>{' '}
</div>

<div className="bg-dark-700 p-4">
  <Button variant="inverse-brand" className="mb-2 mb-sm-0">Brand</Button>{' '}
  <Button variant="inverse-outline-brand" className="mb-2 mb-sm-0">Outline Brand</Button>{' '}
  <Button variant="inverse-primary" className="mb-2 mb-sm-0">Primary</Button>{' '}
  <Button variant="inverse-outline-primary" className="mb-2 mb-sm-0">Outline Primary</Button>{' '}
  <Button variant="inverse-tertiary" className="mb-2 mb-sm-0">Tertiary</Button>{' '}
</div>

Utility Buttons

<>
  <div className="mb-2">
    <Button variant="success" className="mb-2 mb-sm-0">Success</Button>{' '}
    <Button variant="danger" className="mb-2 mb-sm-0">Danger</Button>{' '}
    <Button variant="outline-success" className="mb-2 mb-sm-0">Success</Button>{' '}
    <Button variant="outline-danger" className="mb-2 mb-sm-0">Danger</Button>{' '}
  </div>
  <div className="mb-2">
    <Button variant="link" className="mb-2 mb-sm-0">Link</Button>{' '}
    <Button variant="light" className="mb-2 mb-sm-0">Light</Button> <Button variant="dark">Dark</Button>{' '}
    <Button variant="outline-light" className="mb-2 mb-sm-0">Light</Button>{' '}
    <Button variant="outline-dark" className="mb-2 mb-sm-0">Dark</Button>
  </div>
</>

<>
  <div className="mb-2">
    <Button variant="success" className="mb-2 mb-sm-0">Success</Button>{' '}
    <Button variant="danger" className="mb-2 mb-sm-0">Danger</Button>{' '}
    <Button variant="outline-success" className="mb-2 mb-sm-0">Success</Button>{' '}
    <Button variant="outline-danger" className="mb-2 mb-sm-0">Danger</Button>{' '}
  </div>
  <div className="mb-2">
    <Button variant="link" className="mb-2 mb-sm-0">Link</Button>{' '}
    <Button variant="light" className="mb-2 mb-sm-0">Light</Button> <Button variant="dark">Dark</Button>{' '}
    <Button variant="outline-light" className="mb-2 mb-sm-0">Light</Button>{' '}
    <Button variant="outline-dark" className="mb-2 mb-sm-0">Dark</Button>
  </div>
</>

Size

<>
  <div className="mb-2">
    <Button variant="primary" size="lg" className="mb-2 mb-sm-0">
      Large button
    </Button>{' '}
    <Button variant="outline-primary" size="lg" className="mb-2 mb-sm-0">
      Large button
    </Button>
  </div>
  <div className="mb-2">
    <Button variant="primary" size="sm" className="mb-2 mb-sm-0">
      Small button
    </Button>{' '}
    <Button variant="outline-primary" size="sm" className="mb-2 mb-sm-0">
      Small button
    </Button>
  </div>
  <div className="mb-2">
    <Button variant="link" size="inline" className="mb-2 mb-sm-0">Inline button</Button>
    <Button variant="link" size="inline" className="mb-2 mb-sm-0">Inline button</Button>
  </div>
</>

<>
  <div className="mb-2">
    <Button variant="primary" size="lg" className="mb-2 mb-sm-0">
      Large button
    </Button>{' '}
    <Button variant="outline-primary" size="lg" className="mb-2 mb-sm-0">
      Large button
    </Button>
  </div>
  <div className="mb-2">
    <Button variant="primary" size="sm" className="mb-2 mb-sm-0">
      Small button
    </Button>{' '}
    <Button variant="outline-primary" size="sm" className="mb-2 mb-sm-0">
      Small button
    </Button>
  </div>
  <div className="mb-2">
    <Button variant="link" size="inline" className="mb-2 mb-sm-0">Inline button</Button>
    <Button variant="link" size="inline" className="mb-2 mb-sm-0">Inline button</Button>
  </div>
</>

When to use the inline size

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

<>
  <p>
    <span className="mr-1">2 items selected.</span>
    <Button variant="link" size="inline" className="mr-1">Select all</Button>
    <Button variant="link" size="inline">Clear</Button>
  </p>
</>

<>
  <p>
    <span className="mr-1">2 items selected.</span>
    <Button variant="link" size="inline" className="mr-1">Select all</Button>
    <Button variant="link" size="inline">Clear</Button>
  </p>
</>

Block Buttons

<>
  <Button variant="primary" size="lg" block>
    Block level button
  </Button>
  <Button variant="secondary" size="lg" block>
    Block level button
  </Button>
</>

<>
  <Button variant="primary" size="lg" block>
    Block level button
  </Button>
  <Button variant="secondary" size="lg" block>
    Block level button
  </Button>
</>

Disabled

<>
  <Button variant="primary" disabled>Primary disabled</Button>
  <Button variant="secondary" disabled>Secondary disabled</Button>
  <Button as="a" href="https://edx.org" disabled>Link disabled</Button>
</>

<>
  <Button variant="primary" disabled>Primary disabled</Button>
  <Button variant="secondary" disabled>Secondary disabled</Button>
  <Button as="a" href="https://edx.org" disabled>Link disabled</Button>
</>

For link to be disabled, it must have href defined with some value.

<>
  <Button as='a' disabled>No href</Button>
  <Button as='a' href='' disabled>Empty string href</Button>
</>

<>
  <Button as='a' disabled>No href</Button>
  <Button as='a' href='' disabled>Empty string href</Button>
</>

With Icons before or after

<>
  <Button variant="brand" iconBefore={ArrowBack} className="mb-2 mb-sm-0">
    Brand
  </Button>{' '}
  <Button variant="outline-brand" iconAfter={ArrowDropDown} className="mb-2 mb-sm-0">
    Outline Brand
  </Button>{' '}
  <Button variant="primary" iconBefore={Remove} iconAfter={Add} className="mb-2 mb-sm-0">
    Primary
  </Button>{' '}
  <Button variant="outline-primary" iconBefore={Highlight} className="mb-2 mb-sm-0">
    Outline Primary
  </Button>{' '}
  <Button variant="tertiary" iconAfter={Add} className="mb-2 mb-sm-0">
    Tertiary
  </Button>{' '}
</>

<>
  <Button variant="brand" iconBefore={ArrowBack} className="mb-2 mb-sm-0">
    Brand
  </Button>{' '}
  <Button variant="outline-brand" iconAfter={ArrowDropDown} className="mb-2 mb-sm-0">
    Outline Brand
  </Button>{' '}
  <Button variant="primary" iconBefore={Remove} iconAfter={Add} className="mb-2 mb-sm-0">
    Primary
  </Button>{' '}
  <Button variant="outline-primary" iconBefore={Highlight} className="mb-2 mb-sm-0">
    Outline Primary
  </Button>{' '}
  <Button variant="tertiary" iconAfter={Add} className="mb-2 mb-sm-0">
    Tertiary
  </Button>{' '}
</>

With a Spinner

<>
  <Button variant="primary" className="mb-2 mr-2 mb-sm-0" aria-label="Loading some stuff">
    <Spinner animation="border" />
  </Button>
  <Button variant="brand" className="mb-2 mr-2 mb-sm-0" aria-label="Loading some stuff">
    <Spinner animation="border" />
  </Button>
  <Button variant="outline-primary" className="mb-2 mr-2 mb-sm-0" aria-label="Loading some stuff">
    <Spinner animation="border" />
  </Button>
  <Button variant="outline-brand" className="mb-2 mr-2 mb-sm-0" aria-label="Loading some stuff">
    <Spinner animation="border" />
  </Button>
  <Button variant="inverse-primary" className="mb-2 mr-2 mb-sm-0" aria-label="Loading some stuff">
    <Spinner animation="border" />
  </Button>
  <Button variant="inverse-brand" className="mb-2 mr-2 mb-sm-0" aria-label="Loading some stuff">
    <Spinner animation="border" />
  </Button>
</>

<>
  <Button variant="primary" className="mb-2 mr-2 mb-sm-0" aria-label="Loading some stuff">
    <Spinner animation="border" />
  </Button>
  <Button variant="brand" className="mb-2 mr-2 mb-sm-0" aria-label="Loading some stuff">
    <Spinner animation="border" />
  </Button>
  <Button variant="outline-primary" className="mb-2 mr-2 mb-sm-0" aria-label="Loading some stuff">
    <Spinner animation="border" />
  </Button>
  <Button variant="outline-brand" className="mb-2 mr-2 mb-sm-0" aria-label="Loading some stuff">
    <Spinner animation="border" />
  </Button>
  <Button variant="inverse-primary" className="mb-2 mr-2 mb-sm-0" aria-label="Loading some stuff">
    <Spinner animation="border" />
  </Button>
  <Button variant="inverse-brand" className="mb-2 mr-2 mb-sm-0" aria-label="Loading some stuff">
    <Spinner animation="border" />
  </Button>
</>

Button/Deprecated

Basic Usage

<Button.Deprecated className="btn-primary">Hello World!</Button.Deprecated>

<Button.Deprecated className="btn-primary">Hello World!</Button.Deprecated>

Color Variants

<div>
  <Button.Deprecated className="btn-primary">Primary</Button.Deprecated>
  <Button.Deprecated className="btn-success">Success</Button.Deprecated>
  <Button.Deprecated className="btn-danger">Danger</Button.Deprecated>
  <Button.Deprecated className="btn-light">Light</Button.Deprecated>
  <Button.Deprecated className="btn-dark">Dark</Button.Deprecated>
</div>

<div>
  <Button.Deprecated className="btn-primary">Primary</Button.Deprecated>
  <Button.Deprecated className="btn-success">Success</Button.Deprecated>
  <Button.Deprecated className="btn-danger">Danger</Button.Deprecated>
  <Button.Deprecated className="btn-light">Light</Button.Deprecated>
  <Button.Deprecated className="btn-dark">Dark</Button.Deprecated>
</div>

Outline Variants

<div>
  <Button.Deprecated className="btn-outline-primary">Primary</Button.Deprecated>
  <Button.Deprecated className="btn-outline-success">Success</Button.Deprecated>
  <Button.Deprecated className="btn-outline-danger">Danger</Button.Deprecated>
</div>

<div>
  <Button.Deprecated className="btn-outline-primary">Primary</Button.Deprecated>
  <Button.Deprecated className="btn-outline-success">Success</Button.Deprecated>
  <Button.Deprecated className="btn-outline-danger">Danger</Button.Deprecated>
</div>

Inverse Variants

<div className="bg-gray-700 p-3">
  <Button.Deprecated className="btn-inverse-primary">Primary</Button.Deprecated>
  <Button.Deprecated className="btn-inverse-success">Success</Button.Deprecated>
  <Button.Deprecated className="btn-inverse-danger">Danger</Button.Deprecated>
</div>

<div className="bg-gray-700 p-3">
  <Button.Deprecated className="btn-inverse-primary">Primary</Button.Deprecated>
  <Button.Deprecated className="btn-inverse-success">Success</Button.Deprecated>
  <Button.Deprecated className="btn-inverse-danger">Danger</Button.Deprecated>
</div>

Link Variant

<div className="bg-gray-200 p-3">
  <Button.Deprecated className="btn-link">Link with button container</Button.Deprecated>
  <br />
  <Button.Deprecated className="btn-link px-0">Button with no horizontal padding</Button.Deprecated>
</div>

<div className="bg-gray-200 p-3">
  <Button.Deprecated className="btn-link">Link with button container</Button.Deprecated>
  <br />
  <Button.Deprecated className="btn-link px-0">Button with no horizontal padding</Button.Deprecated>
</div>

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;

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'

Paragon Design System

Button

Core Buttons

Core Buttons (Inverse Pallete)

Utility Buttons

Size

When to use the inline size

Block Buttons

Disabled

With Icons before or after

With a Spinner

Button/Deprecated

Basic Usage

Color Variants

Outline Variants

Inverse Variants

Link Variant

Theme Variables (SCSS)#

Guides

Foundations

PlaygroundBeta

Components

Buttonlike

Choreography

Content

Forms

Forms (deprecated)

Hooks

Imagery & Iconography

Layout

Navigation

Overlays

Status & metadata

Table

All components (A-Z)

Button

Core Buttons#

Core Buttons (Inverse Pallete)#

Utility Buttons#

Size#

When to use the inline size#

Block Buttons#

Disabled#

With Icons before or after#

With a Spinner#

Button/Deprecated#

Basic Usage#

Color Variants#

Outline Variants#

Inverse Variants#

Link Variant#

Theme Variables (SCSS)#

Guides

Foundations

PlaygroundBeta

Components

Buttonlike

Choreography

Content

Forms

Forms (deprecated)

Hooks

Imagery & Iconography

Layout

Navigation

Overlays

Status & metadata

Table

All components (A-Z)

Core Buttons

Core Buttons (Inverse Pallete)

Utility Buttons

Size

When to use the inline size

Block Buttons

Disabled

With Icons before or after

With a Spinner

Button/Deprecated

Basic Usage

Color Variants

Outline Variants

Inverse Variants

Link Variant