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

Show editable code example

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

() => {
  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)

Show editable code example

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

() => {
  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

Show editable code example

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>
    </>
)}

() => {
  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

Show editable code example

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>
    </>
)}

() => {
  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.

Show editable code example

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

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

Show editable code example

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

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

Disabled

Show editable code example

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

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

Show editable code example

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

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

With Icons before or after

Show editable code example

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

() => {
  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

Show editable code example

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

Show editable code example

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

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

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

(Deprecated) color variants

Show editable code example

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>

<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

Show editable code example

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>

<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

Show editable code example

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>

<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

Show editable code example

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>

<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

className string
Specifies class name to apply to the button
disabled bool
Disables the Button, preventing mouse events, even if the underlying component is an <a> element
Defaultfalse
children node
Specifies the text that is displayed within the button.
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.
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.
type string
Used to set the type attribute on the button tag. The default type is button.
variant string
Specifies variant to use. Can be on of the base variants: primary, secondary, success, danger, warning, info, dark, light, link
as well as one of the customized variants (= base variant prefixed with inverse-, outline- or inverse-outline-)
iconBefore func | node
An icon component to render. Example import of a Paragon icon component: import { Check } from '@edx/paragon/icons';
iconAfter func | node
An icon component to render. Example import of a Paragon icon component: import { Check } from '@edx/paragon/icons';

Usage Insights#

Button

	Project Name	Paragon Version	Instance Count
	edx-ora2	20.9.2	1
	edx-platform	2.6.4	40
	frontend-app-account	20.44.0	21
	frontend-app-admin-portal	20.39.2	98
	frontend-app-authn	20.45.5	5
	frontend-app-communications	20.45.0	6
	frontend-app-course-authoring	20.35.1	22
	frontend-app-discussions	20.44.0	23
	frontend-app-ecommerce	20.35.0	3
	frontend-app-enterprise-public-catalog	20.29.0	5
	frontend-app-gradebook	20.45.0	9
	frontend-app-learner-dashboard	20.32.0	37
	frontend-app-learner-portal-enterprise	20.45.1	41
	frontend-app-learner-portal-programs	20.30.0	2
	frontend-app-learner-record	20.45.0	12
	frontend-app-learning	20.28.4	43
	frontend-app-library-authoring	20.45.5	36
	frontend-app-ora-grading	20.45.1	17
	frontend-app-payment	20.45.0	3
	frontend-app-profile	20.45.5	3
	frontend-app-publisher	20.28.5	1
	frontend-app-support-tools	20.45.0	32
	frontend-component-header-edx	20.45.5	4
	frontend-component-header	20.45.5	5
	catalog-search	20.45.0	5
	frontend-learner-portal-base	12.2.0	1
	frontend-lib-content-components	20.45.0	39
	frontend-lib-special-exams	20.29.0	23
	frontend-platform	20.45.5	1
	prospectus	20.45.2	50
	studio-frontend	3.4.8	13

Contents

Core Buttons
Core Buttons (Inverse Pallete)
Utility Buttons
Size
- When to use the inline size
Block Buttons
Button.Deprecated
Theme Variables (SCSS)
Props API
Usage Insights