IconButton
Basic Usage with Paragon Icon
With tooltips
Basic Usage with FontAwesome Icon
Active State
isActive=true with inverted colors
Inverted Colors
Sizes
- DefaultFontAwesomeIcon
iconAs
elementType src
element|funcDefaultnullAn icon component to render. Example import of a Paragon icon component:
import { Check } from '@edx/paragon/dist/icon';alt
stringRequiredAlt 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
boolDefaultfalseChanges icon styles for dark background
icon
shape{prefix:string,iconName:string,icon:}array,Default{}Accepts a React fontawesome icon. https://fontawesome.com/how-to-use/on-the-web/using-with/react
iconClassNames
stringDefault''Extra class names that will be added to the icon
onClick
funcDefault() => {}Click handler for the button
variant
enum'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'light' | 'dark' | 'black'Default'primary'Type of button (uses Bootstrap options)
size
enum'sm' | 'md' | 'inline'Default'md'size of button to render
isActive
boolDefaultfalsewhether to show the IconButton in an active state, whose styling is distinct from default state
tooltipPlacement
stringDefault'top'tooltip placement can be top, left, right etc, per https://popper.js.org/docs/v2/constructors/#options
tooltipContent
nodeRequiredany valid JSX or text to be rendered as tooltip contents
variant
enum'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'light' | 'dark' | 'black'Default'primary'Type of button (uses Bootstrap options)
invertColors
boolDefaultfalseChanges icon styles for dark background