Paragon Design System

Technical Documentation

npm_version
Changelog
GitHub

IconButton

Basic Usage with Paragon Icon

With tooltips

Active State

isActive=true with inverted colors

Inverted Colors

Sizes

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

Contents

Guides

Foundations

Components

Buttonlike
Choreography
Content
Forms
Forms (deprecated)
Hooks
Imagery & Iconography
Layout
Navigation
Overlays
Status & metadata
Table

All components (A-Z)