Paragon Design System

Technical Documentation

Theme

PlaygroundBeta

npm_versionnpm Paragon package page

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

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

() => {

  const isExtraSmall = useMediaQuery({ maxWidth: breakpoints.medium.maxWidth });



  return (

    <Stack gap={2} direction={ isExtraSmall ? "vertical" : "horizontal" }>

      <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>

    </Stack>

)}

Core Buttons (Inverse Pallete)

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

() => {

  const isExtraSmall = useMediaQuery({ maxWidth: breakpoints.medium.maxWidth });



  return (

    <Stack

      className="bg-dark-700 p-4"

      gap={2}

      direction={ isExtraSmall ? "vertical" : "horizontal" }

    >

      <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>

    </Stack>

)}

Utility Buttons

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

() => {

  const isExtraSmall = useMediaQuery({ maxWidth: breakpoints.extraSmall.maxWidth });



  return (

    <>

      <Stack

        className="mb-2"

        gap={2}

        direction={ isExtraSmall ? "vertical" : "horizontal" }

      >

        <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>

      </Stack>

      <Stack

        gap={2}

        direction={ isExtraSmall ? "vertical" : "horizontal" }

      >

        <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" className="mb-2 mb-sm-0">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>

      </Stack>

    </>

)}

Size

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

() => {

  const isExtraSmall = useMediaQuery({ maxWidth: breakpoints.extraSmall.maxWidth });



  return (

    <>

        <Stack

          className="mb-2"

          gap={2}

          direction={ isExtraSmall ? "vertical" : "horizontal" }

        >

          <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>

        </Stack>

        <Stack

          className="mb-2"

          gap={2}

          direction={ isExtraSmall ? "vertical" : "horizontal" }

        >

          <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>

        </Stack>

        <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>

    </>

)}

When to use the inline size

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

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

<>

  <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

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

<>

  <Button variant="primary" size="lg" block>

    Block level button

  </Button>

  <Button variant="secondary" size="lg" block>

    Block level button

  </Button>

</>

Disabled

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

<>

  <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>

</>

With empty href

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

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

<>

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

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

</>

With Icons before or after

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

() => {

  const isExtraSmall = useMediaQuery({ maxWidth: breakpoints.large.maxWidth });



  return (

    <Stack

      className="mb-2"

      gap={2}

      direction={ isExtraSmall ? "vertical" : "horizontal" }

    >

      <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>

    </Stack>

)}

With a Spinner

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

<>

  <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

(Deprecated) basic usage

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

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

(Deprecated) color variants

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

<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>

(Deprecated) outline variants

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

<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>

(Deprecated) inverse variants

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

<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>

(Deprecated) link variant

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

<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;
$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#

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'

Usage Insights#

Button

Project NameParagon VersionInstance Count
edx-ora220.9.21
edx-platform2.6.440
frontend-app-account20.36.020
frontend-app-admin-portal20.26.3101
frontend-app-authn20.36.25
frontend-app-communications20.30.16
frontend-app-course-authoring20.32.013
frontend-app-discussions20.15.023
frontend-app-ecommerce20.35.02
frontend-app-enterprise-public-catalog20.29.05
frontend-app-gradebook19.25.411
frontend-app-learner-dashboard20.32.038
frontend-app-learner-portal-enterprise20.36.036
frontend-app-learner-portal-programs20.28.42
frontend-app-learner-record20.32.07
frontend-app-learning20.28.443
frontend-app-library-authoring20.30.136
frontend-app-ora-grading20.30.017
frontend-app-payment20.30.13
frontend-app-profile20.32.07
frontend-app-publisher20.28.51
frontend-app-support-tools20.26.031
frontend-component-header-edx20.32.32
frontend-component-header20.36.03
catalog-search19.25.15
frontend-learner-portal-base12.2.01
frontend-lib-content-components20.34.031
frontend-lib-special-exams20.22.423
frontend-platform20.30.11
prospectus20.32.336
studio-frontend3.4.813
Leave feedback

Contents

All components (A-Z)