Paragon Design System

Technical Documentation

Theme

PlaygroundBeta

npm_versionnpm Paragon package page

IconButton

Basic Usage with Paragon Icon

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

() => {

  const variants = ["brand", "primary", "secondary", "success", "warning", "danger", "light", "dark", "black"];

  return (

    <div className="d-flex flex-wrap">

      {variants.map((variant) => (

        <IconButton key={variant} src={Close} iconAs={Icon} alt="Close" onClick={() => {}} variant={variant} className="mr-2" />

      ))}

    </div>

  );

}

With tooltips

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

() => {

  const variants = ["brand", "primary", "secondary", "success", "warning", "danger", "light", "dark", "black"];

  return (

    <div className="d-flex">

      {variants.map((variant) => (

        <IconButtonWithTooltip

          key={variant}

          tooltipPlacement='top'

          tooltipContent={<div>a nice tooltip of {variant}!</div>}

          src={Close}

          iconAs={Icon}

          alt="Close"

          onClick={() => {}}

          variant={variant}

          className="mr-2"

        />

      ))}

    </div>

  );

}

Active State

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

() => {

  const variants = ["brand", "primary", "secondary", "success", "warning", "danger", "light", "dark", "black"];

  return (

    <div className="d-flex">

      {variants.map((variant) => (

        <IconButton 

          isActive

          key={variant}

          src={Close}

          iconAs={Icon}

          alt="Close"

          onClick={() => {}}

          variant={variant}

          className="mr-2 mb-2"

        />

      ))}

    </div>

  );

}

isActive=true with inverted colors

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

() => {

  const variants = ["brand", "primary", "secondary", "success", "warning", "danger", "light", "dark", "black"];

  return (

    <div className="d-flex">

      {variants.map((variant) => (

        <IconButton 

          invertColors

          isActive

          key={variant}

          src={Close}

          iconAs={Icon}

          alt="Close"

          onClick={() => {}}

          variant={variant}

          className="mr-2"

        />

      ))}

    </div>

  );

}

Inverted Colors

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

<div className="d-flex">

  <div className="p-1 bg-brand">

    <IconButton

      src={MenuIcon}

      iconAs={Icon}

      alt="Menu"

      onClick={() => console.log("You clicked the menu button")}

      variant="brand"

      invertColors

    />

  </div>

  <div className="p-1 bg-primary">

    <IconButton

      src={MenuIcon}

      iconAs={Icon}

      alt="Menu"

      onClick={() => console.log("You clicked the menu button")}

      variant="primary"

      invertColors

    />

  </div>

  <div className="p-1 bg-secondary">

    <IconButton

      src={MenuIcon}

      iconAs={Icon}

      alt="Menu"

      onClick={() => console.log("You clicked the menu button")}

      variant="secondary"

      invertColors

    />

  </div>

  <div className="p-1 bg-success">

    <IconButton

      src={MenuIcon}

      iconAs={Icon}

      alt="Menu"

      onClick={() => console.log("You clicked the menu button")}

      variant="success"

      invertColors

    />

  </div>

  <div className="p-1 bg-warning">

    <IconButton

      src={MenuIcon}

      iconAs={Icon}

      alt="Menu"

      onClick={() => console.log("You clicked the menu button")}

      variant="warning"

      invertColors

    />

  </div>

  <div className="p-1 bg-danger">

    <IconButton

      src={MenuIcon}

      iconAs={Icon}

      alt="Menu"

      onClick={() => console.log("You clicked the menu button")}

      variant="danger"

      invertColors

    />

  </div>

  <div className="p-1 bg-light">

    <IconButton

      src={MenuIcon}

      iconAs={Icon}

      alt="Menu"

      onClick={() => console.log("You clicked the menu button")}

      variant="light"

      invertColors

    />

  </div>

  <div className="p-1" style={{ background: "black" }}>

    <IconButton

      src={MenuIcon}

      iconAs={Icon}

      alt="Menu"

      onClick={() => console.log("You clicked the menu button")}

      variant="black"

      invertColors

    />

  </div>

</div>

Sizes

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

<>

  <div className="mb-1">

    Small

    <IconButton

      src={MenuIcon}

      iconAs={Icon}

      alt="Menu"

      onClick={() => {}}

      variant="primary"

      size="sm"

    />

  </div>

  <div className="mb-1">

    Inline:

    <IconButton

      src={MenuIcon}

      iconAs={Icon}

      alt="Menu"

      onClick={() => {}}

      variant="primary"

      size="inline"

    />

  </div>

  <div className="x-small mb-1">

    An <strong>inline</strong> Icon Button inherits font size!

    For example, applying className="x-small" will make the Icon Button look like this:

    <IconButton

      src={Favorite}

      iconAs={Icon}

      alt="Favorite"

      onClick={() => {}}

      variant="primary"

      size="inline"

    />

    . The Icon Button will also wrap with the text as long as it is not a direct child of a flex box.

  </div>

</>

Props API#

IconButton Props API
  • className string

    A custom class name.

  • iconAs elementType

    Component that renders the icon, currently defaults to FontAwesomeIcon, but is going to be deprecated soon, please use Paragon's icons instead.

  • src element | func

    An icon component to render. Example import of a Paragon icon component: import { Check } from '@edx/paragon/dist/icon';

    Defaultnull
  • alt string Required

    Alt text for your icon. For best practice, avoid using alt text to describe the image in the IconButton. Instead, we recommend describing the function of the button.

  • invertColors bool

    Changes icon styles for dark background

    Defaultfalse
  • icon shape {
    prefix: string,
    iconName: string,
    icon: array,
    }

    Accepts a React fontawesome icon. https://fontawesome.com/how-to-use/on-the-web/using-with/react

  • iconClassNames string

    Extra class names that will be added to the icon

  • onClick func

    Click handler for the button

    Default() => {}
  • variant enum'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'light' | 'dark' | 'black' | 'brand'

    Type of button (uses Bootstrap options)

    Default'primary'
  • size enum'sm' | 'md' | 'inline'

    size of button to render

    Default'md'
  • isActive bool

    whether to show the IconButton in an active state, whose styling is distinct from default state

    Defaultfalse
IconButtonWithTooltip Props API
  • tooltipPlacement string

    tooltip placement can be top, left, right etc, per https://popper.js.org/docs/v2/constructors/#options

    Default'top'
  • tooltipContent node Required

    any valid JSX or text to be rendered as tooltip contents

  • variant enum'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'light' | 'dark' | 'black' | 'brand'

    Type of button (uses Bootstrap options)

    Default'primary'
  • invertColors bool

    Changes icon styles for dark background

    Defaultfalse

Usage Insights#

IconButton

Project NameParagon VersionInstance Count
frontend-app-admin-portal20.26.38
frontend-app-authn20.36.24
frontend-app-communications20.30.13
frontend-app-course-authoring20.32.05
frontend-app-discussions20.15.011
frontend-app-gradebook19.25.41
frontend-app-learner-dashboard20.32.03
frontend-app-learner-portal-enterprise20.36.01
frontend-app-learner-record20.32.01
frontend-app-learning20.28.45
frontend-app-library-authoring20.30.13
frontend-app-ora-grading20.30.05
frontend-app-profile20.32.01
frontend-lib-content-components20.34.016
prospectus20.32.36

IconButtonWithTooltip

Project NameParagon VersionInstance Count
frontend-app-support-tools20.26.01
frontend-lib-content-components20.34.05
Leave feedback

Contents

All components (A-Z)