IconButton

Basic Usage with Paragon Icon

Show editable code example

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} alt="Close" onClick={() => {}} variant={variant} className="mr-2" />
      ))}
    </div>
  );
}

() => {
  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} alt="Close" onClick={() => {}} variant={variant} className="mr-2" />
      ))}
    </div>
  );
}

With tooltips

Show editable code example

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}
          alt="Close"
          onClick={() => {}}
          variant={variant}
          className="mr-2"
        />
      ))}
    </div>
  );
}

() => {
  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}
          alt="Close"
          onClick={() => {}}
          variant={variant}
          className="mr-2"
        />
      ))}
    </div>
  );
}

Active State

Show editable code example

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}
          alt="Close"
          onClick={() => {}}
          variant={variant}
          className="mr-2 mb-2"
        />
      ))}
    </div>
  );
}

() => {
  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}
          alt="Close"
          onClick={() => {}}
          variant={variant}
          className="mr-2 mb-2"
        />
      ))}
    </div>
  );
}

isActive=true with inverted colors

Show editable code example

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}
          alt="Close"
          onClick={() => {}}
          variant={variant}
          className="mr-2"
        />
      ))}
    </div>
  );
}

() => {
  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}
          alt="Close"
          onClick={() => {}}
          variant={variant}
          className="mr-2"
        />
      ))}
    </div>
  );
}

Inverted Colors

Show editable code example

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}
      alt="Menu"
      onClick={() => console.log("You clicked the menu button")}
      variant="brand"
      invertColors
    />
  </div>
  <div className="p-1 bg-primary">
    <IconButton
      src={MenuIcon}
      alt="Menu"
      onClick={() => console.log("You clicked the menu button")}
      variant="primary"
      invertColors
    />
  </div>
  <div className="p-1 bg-secondary">
    <IconButton
      src={MenuIcon}
      alt="Menu"
      onClick={() => console.log("You clicked the menu button")}
      variant="secondary"
      invertColors
    />
  </div>
  <div className="p-1 bg-success">
    <IconButton
      src={MenuIcon}
      alt="Menu"
      onClick={() => console.log("You clicked the menu button")}
      variant="success"
      invertColors
    />
  </div>
  <div className="p-1 bg-warning">
    <IconButton
      src={MenuIcon}
      alt="Menu"
      onClick={() => console.log("You clicked the menu button")}
      variant="warning"
      invertColors
    />
  </div>
  <div className="p-1 bg-danger">
    <IconButton
      src={MenuIcon}
      alt="Menu"
      onClick={() => console.log("You clicked the menu button")}
      variant="danger"
      invertColors
    />
  </div>
  <div className="p-1 bg-light">
    <IconButton
      src={MenuIcon}
      alt="Menu"
      onClick={() => console.log("You clicked the menu button")}
      variant="light"
      invertColors
    />
  </div>
  <div className="p-1" style={{ background: "black" }}>
    <IconButton
      src={MenuIcon}
      alt="Menu"
      onClick={() => console.log("You clicked the menu button")}
      variant="black"
      invertColors
    />
  </div>
</div>

<div className="d-flex">
  <div className="p-1 bg-brand">
    <IconButton
      src={MenuIcon}
      alt="Menu"
      onClick={() => console.log("You clicked the menu button")}
      variant="brand"
      invertColors
    />
  </div>
  <div className="p-1 bg-primary">
    <IconButton
      src={MenuIcon}
      alt="Menu"
      onClick={() => console.log("You clicked the menu button")}
      variant="primary"
      invertColors
    />
  </div>
  <div className="p-1 bg-secondary">
    <IconButton
      src={MenuIcon}
      alt="Menu"
      onClick={() => console.log("You clicked the menu button")}
      variant="secondary"
      invertColors
    />
  </div>
  <div className="p-1 bg-success">
    <IconButton
      src={MenuIcon}
      alt="Menu"
      onClick={() => console.log("You clicked the menu button")}
      variant="success"
      invertColors
    />
  </div>
  <div className="p-1 bg-warning">
    <IconButton
      src={MenuIcon}
      alt="Menu"
      onClick={() => console.log("You clicked the menu button")}
      variant="warning"
      invertColors
    />
  </div>
  <div className="p-1 bg-danger">
    <IconButton
      src={MenuIcon}
      alt="Menu"
      onClick={() => console.log("You clicked the menu button")}
      variant="danger"
      invertColors
    />
  </div>
  <div className="p-1 bg-light">
    <IconButton
      src={MenuIcon}
      alt="Menu"
      onClick={() => console.log("You clicked the menu button")}
      variant="light"
      invertColors
    />
  </div>
  <div className="p-1" style={{ background: "black" }}>
    <IconButton
      src={MenuIcon}
      alt="Menu"
      onClick={() => console.log("You clicked the menu button")}
      variant="black"
      invertColors
    />
  </div>
</div>

Sizes

Show editable code example

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

<>
  <div className="mb-1">
    Small
    <IconButton
      src={MenuIcon}
      alt="Menu"
      onClick={() => {}}
      variant="primary"
      size="sm"
    />
  </div>
  <div className="mb-1">
    Inline:
    <IconButton
      src={MenuIcon}
      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}
      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>
</>

<>
  <div className="mb-1">
    Small
    <IconButton
      src={MenuIcon}
      alt="Menu"
      onClick={() => {}}
      variant="primary"
      size="sm"
    />
  </div>
  <div className="mb-1">
    Inline:
    <IconButton
      src={MenuIcon}
      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}
      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>
</>

Theme Variables#

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

Props API#

IconButton Props API

className string
A custom class name.
iconAs PropTypes.elementType as any
Component that renders the icon, currently defaults to Icon
DefaultIcon
src PropTypes.elementType as any
An icon component to render. Example import of a Paragon icon component: import { Check } from '@openedx/paragon/icons';
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 PropTypes.shape({ prefix: PropTypes.string, iconName: PropTypes.string, // eslint-disable-next-line react/forbid-prop-types icon: PropTypes.array, }) as any
Accepts a Paragon icon
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
children any

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)
invertColors bool
Changes icon styles for dark background
iconAs unknown type
className string
Additional CSS class[es] to apply to this button
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.
src unknown type
An icon component to render. Example import of a Paragon icon component: import { Check } from '@openedx/paragon/icons';
iconClassNames string
Extra class names that will be added to the icon
onClick unknown type
Click handler for the button
isActive unknown type
whether to show the IconButton in an active state, whose styling is distinct from default state
icon unknown type
size unknown type | unknown type | unknown type
size of button to render
children unknown type
no children

Usage Insights#

IconButton

Project Name	Paragon Version	Instance Count
frontend-app-admin-portal	21.13.1	14
frontend-app-authn	22.11.2	4
frontend-app-communications	22.7.0	3
frontend-app-course-authoring	22.8.1	38
frontend-app-discussions	22.7.0	12
frontend-app-enterprise-public-catalog	21.13.1	2
frontend-app-gradebook	22.8.1	1
frontend-app-learner-dashboard	22.9.0	1
frontend-app-learner-portal-enterprise	21.13.1	5
frontend-app-learner-record	22.10.0	1
frontend-app-learning	22.10.0	8
frontend-app-library-authoring	21.11.3	4
frontend-app-ora-grading	21.11.3	5
frontend-app-support-tools	21.13.1	3
frontend-component-header-edx	21.13.1	2
frontend-component-header	22.10.0	1
prospectus	20.46.2	7

IconButtonWithTooltip

Project Name	Paragon Version	Instance Count
frontend-app-admin-portal	21.13.1	5
frontend-app-course-authoring	22.8.1	29
frontend-app-discussions	22.7.0	1
frontend-app-learner-portal-enterprise	21.13.1	2
frontend-app-library-authoring	21.11.3	1
frontend-app-support-tools	21.13.1	2

Edit this page Leave feedback

Paragon Design System

Theme

IconButton

Basic Usage with Paragon Icon

With tooltips

Active State

isActive=true with inverted colors

Inverted Colors

Sizes

Theme Variables#

Props API#

Usage Insights#

IconButton

IconButtonWithTooltip

All components (A-Z)

Theme

IconButton

Basic Usage with Paragon Icon#

With tooltips#

Active State#

isActive=true with inverted colors#

Inverted Colors#

Sizes#

Theme Variables#

Props API#

Usage Insights#

IconButton

IconButtonWithTooltip

All components (A-Z)

Basic Usage with Paragon Icon

With tooltips

Active State

isActive=true with inverted colors

Inverted Colors

Sizes