Button

Edit this page Leave feedback

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">Brand</Button>
      <Button variant="outline-brand">Outline Brand</Button>
      <Button variant="primary">Primary</Button>
      <Button variant="outline-primary">Outline Primary</Button>
      <Button variant="tertiary">Tertiary</Button>
    </Stack>
)}

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

  return (
    <Stack gap={2} direction={ isExtraSmall ? "vertical" : "horizontal" }>
      <Button variant="brand">Brand</Button>
      <Button variant="outline-brand">Outline Brand</Button>
      <Button variant="primary">Primary</Button>
      <Button variant="outline-primary">Outline Primary</Button>
      <Button variant="tertiary">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">Brand</Button>
      <Button variant="inverse-outline-brand">Outline Brand</Button>
      <Button variant="inverse-primary">Primary</Button>
      <Button variant="inverse-outline-primary">Outline Primary</Button>
      <Button variant="inverse-tertiary">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">Brand</Button>
      <Button variant="inverse-outline-brand">Outline Brand</Button>
      <Button variant="inverse-primary">Primary</Button>
      <Button variant="inverse-outline-primary">Outline Primary</Button>
      <Button variant="inverse-tertiary">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">Success</Button>
        <Button variant="danger">Danger</Button>
        <Button variant="outline-success">Success</Button>
        <Button variant="outline-danger">Danger</Button>
      </Stack>
      <Stack
        gap={2}
        direction={ isExtraSmall ? "vertical" : "horizontal" }
      >
        <Button variant="link">Link</Button>
        <Button variant="light">Light</Button>
        <Button variant="dark">Dark</Button>
        <Button variant="outline-light">Light</Button>
        <Button variant="outline-dark">Dark</Button>
      </Stack>
    </>
)}

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

  return (
    <>
      <Stack
        className="mb-2"
        gap={2}
        direction={ isExtraSmall ? "vertical" : "horizontal" }
      >
        <Button variant="success">Success</Button>
        <Button variant="danger">Danger</Button>
        <Button variant="outline-success">Success</Button>
        <Button variant="outline-danger">Danger</Button>
      </Stack>
      <Stack
        gap={2}
        direction={ isExtraSmall ? "vertical" : "horizontal" }
      >
        <Button variant="link">Link</Button>
        <Button variant="light">Light</Button>
        <Button variant="dark">Dark</Button>
        <Button variant="outline-light">Light</Button>
        <Button variant="outline-dark">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">
          Large button
        </Button>
        <Button variant="outline-primary" size="lg">
          Large button
        </Button>
      </Stack>
      <Stack
        className="mb-2"
        gap={2}
        direction={ isExtraSmall ? "vertical" : "horizontal" }
      >
        <Button variant="primary" size="sm">
          Small button
        </Button>
        <Button variant="outline-primary" size="sm">
          Small button
        </Button>
      </Stack>
      <Stack
        className="mb-2"
        gap={2}
        direction={ isExtraSmall ? "vertical" : "horizontal" }
      >
        <Button variant="link" size="inline">Inline button</Button>
        <Button variant="link" size="inline">Inline button</Button>
      </Stack>
    </>
  )
}

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

  return (
    <>
      <Stack
        className="mb-2"
        gap={2}
        direction={ isExtraSmall ? "vertical" : "horizontal" }
      >
        <Button variant="primary" size="lg">
          Large button
        </Button>
        <Button variant="outline-primary" size="lg">
          Large button
        </Button>
      </Stack>
      <Stack
        className="mb-2"
        gap={2}
        direction={ isExtraSmall ? "vertical" : "horizontal" }
      >
        <Button variant="primary" size="sm">
          Small button
        </Button>
        <Button variant="outline-primary" size="sm">
          Small button
        </Button>
      </Stack>
      <Stack
        className="mb-2"
        gap={2}
        direction={ isExtraSmall ? "vertical" : "horizontal" }
      >
        <Button variant="link" size="inline">Inline button</Button>
        <Button variant="link" size="inline">Inline button</Button>
      </Stack>
    </>
  )
}

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.

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

  return (
    <Stack
      className="mb-2"
      gap={2}
      direction={ isExtraSmall ? "vertical" : "horizontal" }
    >
      <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>
    </Stack>
    )
}

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

  return (
    <Stack
      className="mb-2"
      gap={2}
      direction={ isExtraSmall ? "vertical" : "horizontal" }
    >
      <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>
    </Stack>
    )
}

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.

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

  return (
    <Stack
      className="mb-2"
      gap={2}
      direction={ isExtraSmall ? "vertical" : "horizontal" }
    >
      <Button as="a" disabled>No href</Button>
      <Button as="a" href="" disabled>Empty string href</Button>
    </Stack>
  )
}

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

  return (
    <Stack
      className="mb-2"
      gap={2}
      direction={ isExtraSmall ? "vertical" : "horizontal" }
    >
      <Button as="a" disabled>No href</Button>
      <Button as="a" href="" disabled>Empty string href</Button>
    </Stack>
  )
}

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}>
        Brand
      </Button>
      <Button variant="outline-brand" iconAfter={ArrowDropDown}>
        Outline Brand
      </Button>
      <Button variant="primary" iconBefore={Remove} iconAfter={Add}>
        Primary
      </Button>
      <Button variant="outline-primary" iconBefore={Highlight}>
        Outline Primary
      </Button>
      <Button variant="tertiary" iconAfter={Add}>
        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}>
        Brand
      </Button>
      <Button variant="outline-brand" iconAfter={ArrowDropDown}>
        Outline Brand
      </Button>
      <Button variant="primary" iconBefore={Remove} iconAfter={Add}>
        Primary
      </Button>
      <Button variant="outline-primary" iconBefore={Highlight}>
        Outline Primary
      </Button>
      <Button variant="tertiary" iconAfter={Add}>
        Tertiary
      </Button>
    </Stack>
  )
}

Stateful buttons

To implement loading state using a Button component, the StatefulButton component is available for use.
This specialized component is designed to seamlessly manage and display boot states, providing a more efficient and user-friendly experience.

Theme Variables#

CSS Variable	Computed Value
‌	‌
‌	‌
‌	‌
‌	‌
‌	‌

Props API#

Button Props API

This is a pass through component from React-Bootstrap; see original props documentation here. You can also pass any HTML attributes, such as onClick, role, etc. Which attributes are available depends on whether or not you have overriden the underlying HTML element using the as property.

as React.ElementType
Set a custom element for this component (default: button, with type="button").
size 'sm' | 'md' | 'lg' | 'inline'

iconBefore React.ComponentType

An icon component to render. Example:

import { Close } from '@openedx/paragon/icons';
<Button iconBefore={Close}>Close</Button>

iconAfter React.ComponentType

An icon component to render. Example:

import { Close } from '@openedx/paragon/icons';
<Button iconAfter={Close}>Close</Button>

disabled boolean
Disables the Button, preventing mouse events, even if the underlying component is an <a> element
className string
Optional: Specify additional class name(s) to apply to the button
children React.ReactNode Required
Specifies the text that is displayed within the button.
variant BaseVariant | `inverse-${BaseVariant}` | `outline-${BaseVariant}` | `inverse-outline-${BaseVariant}` | OtherDeprecatedValue
Specifies variant to use. Can be one of the base variants: primary, secondary, tertiary, brand, success, danger, warning, info, dark, light, link, as well as one of the customized variants (= base variant prefixed with inverse-, outline- or inverse-outline-)

Usage Insights#

Button

	Project Name	Paragon Version	Instance Count
	edx-ora2	21.13.1	2
	edx-platform	2.6.4	38
	frontend-app-account	22.10.0	21
	frontend-app-admin-portal	21.13.1	161
	frontend-app-authn	22.11.2	5
	frontend-app-communications	22.7.0	6
	frontend-app-course-authoring	22.8.1	207
	teams	22.8.1	3
	frontend-app-discussions	22.7.0	24
	frontend-app-ecommerce	20.46.3	3
	frontend-app-enterprise-public-catalog	21.13.1	7
	frontend-app-gradebook	22.8.1	9
	frontend-app-learner-dashboard	22.9.0	22
	frontend-app-learner-portal-enterprise	21.13.1	68
	frontend-app-learner-portal-programs	21.13.1	2
	frontend-app-learner-record	22.10.0	12
	frontend-app-learning	22.10.0	45
	frontend-app-library-authoring	21.11.3	30
	frontend-app-ora-grading	21.11.3	17
	frontend-app-payment	22.9.0	3
	frontend-app-profile	22.10.0	3
	frontend-app-publisher	21.13.1	1
	frontend-app-support-tools	21.13.1	48
	frontend-component-header-edx	21.13.1	6
	frontend-component-header	22.10.0	2
	catalog-search	21.13.1	5
	frontend-learner-portal-base	12.2.0	1
	frontend-lib-special-exams	22.7.0	23
	frontend-platform	22.8.1	1
	prospectus	20.46.2	35
	studio-frontend	3.4.8	14

Edit this page Leave feedback

Contents

Core Buttons
Core Buttons (Inverse Pallete)
Utility Buttons
Size
- When to use the inline size
Block Buttons
Stateful buttons
Theme Variables
Props API
Usage Insights