IconButton

A button component that displays an icon with optional tooltip support. This component is commonly used for actions that are best represented by an icon, such as edit, delete, or close actions.

Usage

import { IconButton } from '@blendx-ui';
import { faEdit } from '@fortawesome/free-solid-svg-icons';

// Basic usage
<IconButton
  icon={faEdit}
  alt="Edit item"
  onClick={handleEdit}
/>

// With tooltip
<IconButton.IconButtonWithTooltip
  icon={faEdit}
  alt="Edit item"
  onClick={handleEdit}
  tooltipContent="Click to edit this item"
  tooltipPlacement="top"
/>

// With custom icon component
<IconButton
  iconAs={CustomIcon}
  icon={customIconProps}
  alt="Custom action"
  onClick={handleAction}
/>

Props

Prop	Type	Required	Default	Description
icon	object	No	-	FontAwesome icon object or custom icon props
alt	string	Yes	-	Accessibility label for the button
onClick	function	No	() =>	Click handler for the button
size	string	No	'md'	Size of the button ('sm', 'md', 'inline')
variant	string	No	'primary'	Visual variant of the button
invertColors	boolean	No	false	Whether to invert colors for dark backgrounds
iconAs	elementType	No	FontAwesomeIcon	Component to render the icon
isActive	boolean	No	false	Whether the button is in active state
className	string	No	-	Additional CSS classes
iconClassNames	string	No	-	Additional CSS classes for the icon

IconButtonWithTooltip Props

Prop	Type	Required	Default	Description
tooltipContent	node	Yes	-	Content to display in the tooltip
tooltipPlacement	string	No	'top'	Placement of the tooltip
...IconButtonProps	-	-	-	All IconButton props are supported

Examples

Basic Icon Button

<IconButton
  icon={faEdit}
  alt="Edit"
  onClick={handleEdit}
/>

Icon Button with Tooltip

<IconButton.IconButtonWithTooltip
  icon={faTrash}
  alt="Delete"
  onClick={handleDelete}
  tooltipContent="Delete this item"
  tooltipPlacement="top"
/>

Icon Button with Custom Icon

<IconButton
  iconAs={CustomIcon}
  icon={{ name: 'custom-icon' }}
  alt="Custom action"
  onClick={handleAction}
/>

Accessibility

• Requires an alt text for screen readers
• Supports keyboard navigation
• Tooltip provides additional context for screen readers
• Active state is visually distinct

Best Practices

• Always provide meaningful alt text that describes the action, not the icon
• Use tooltips for additional context when needed
• Consider using standard icons for common actions
• Use appropriate sizes for different contexts
• Consider color contrast when using invertColors

Related Components

• Button
• Tooltip
• OverlayTrigger

Notes

• The component currently defaults to FontAwesome icons but is moving towards using Paragon's icons
• When using custom icons, ensure they follow the same sizing and styling patterns
• The active state can be used to indicate selected or toggled states

Basic Usage with Paragon Icon

() => {
  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

() => {
  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

() => {
  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

() => {
  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

<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

<>
  <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>
</>

Dependencies

Repository	Usage Count
frontend-app-staff-dashboard	18
frontend-app-dashboard	5
frontend-app-course-authoring	7
frontend-app-authn	2
frontend-app-discussions	3
frontend-app-account	2
frontend-app-learning	6

Detailed usage locations:

frontend-app-staff-dashboard

• src/components/DocumentCard.jsx
• src/components/VideoCard.jsx
• src/pages/ai-studio/AiStudio.jsx
• src/pages/ai-studio/components/StructureView.jsx
• src/pages/analytics/interaction-chart/index.jsx
• src/pages/home/AiHome.jsx
• src/pages/library/videos/index.jsx
• src/pages/notifications/index.jsx
• src/pages/organizations/CreateOrganisation.jsx
• src/pages/platform-settings/customization/appearance/BannerEdit.jsx
• src/pages/program-single/program-team/index.jsx
• src/pages/student-progress/course-engagement-chart/india.jsx
• src/pages/support/index.jsx
• src/pages/users/AddUsersDrawer.jsx
• src/pages/users/index.jsx
• src/pages/users/teams/AddUsersToTeamDrawer.jsx
• src/pages/users/teams/TeamSingle.jsx
• src/pages/users/teams/index.jsx

frontend-app-dashboard

• src/pages/home/AiHome.jsx
• src/pages/notifications/index.jsx
• src/pages/progress/course-engagement-chart/india.jsx
• src/pages/support/index.jsx
• src/pages/support/view-ticket/MessageInput.jsx

frontend-app-course-authoring

• src/certificates/certificate-details/CertificateDetails.jsx
• src/certificates/certificate-signatories/signatory/Signatory.jsx
• src/certificates/certificate-signatories/signatory/SignatoryForm.jsx
• src/course-outline/card-header/CardHeader.jsx
• src/fee-statistics/index.jsx
• src/group-configurations/content-groups-section/ContentGroupCard.jsx
• src/studio-home/card-item/index.jsx

frontend-app-authn

• src/common-components/PasswordField.jsx
• src/register/RegistrationFields/UsernameField/UsernameField.jsx

frontend-app-discussions

• src/discussions/posts/post/LikeButton.jsx
• src/discussions/posts/post/PostFooter.jsx
• src/discussions/posts/post-actions-bar/PostActionsBar.jsx

frontend-app-account

• src/account-settings/EditableField.jsx
• src/account-settings/FormGroup.jsx

frontend-app-learning

• src/courseware/course/Course.jsx
• src/courseware/course/content-tools/calculator/Calculator.jsx
• src/courseware/course/content-tools/fullscreen-button/FullscreenButton.jsx
• src/courseware/course/content-tools/notes-visibility/NotesVisibility.jsx
• src/courseware/course/new-sidebar/sidebars/discussions-notifications/DiscussionsNotificationsTrigger.jsx
• src/courseware/course/sidebar/sidebars/course-outline/CourseOutlineTrigger.jsx