Variable IconButtonConst

Type Declaration

• • (props: IconButtonPropsExtend): Element

  • Material-UI IconButton component with optional tooltip support.

    Wraps Material-UI's IconButton to provide accessible icon-based button control with built-in tooltip support. Requires aria-label for accessibility compliance. Tooltip can either use the aria-label or be customized via tooltip prop. All Material-UI IconButton props are supported and passed through directly.

    Parameters

    • props: IconButtonPropsExtend

      IconButton configuration (see IconButtonPropsExtend interface)

    Returns Element

    IconButton component with optional tooltip overlay on hover

    Example

    // Basic usage
    <IconButton aria-label="Delete item">
      <DeleteIcon />
    </IconButton>
    
     // With implicit tooltip (aria-label)
    <IconButton
      aria-label="Delete item"
      tooltipPlacement="top"
    >
      <DeleteIcon />
    </IconButton>
    
    // With explicit tooltip
    <IconButton
      aria-label="Delete item"
      tooltip="Delete item permanently"
      tooltipPlacement="top"
    >
      <DeleteIcon />
    </IconButton>
    
    // Tooltip disabled (no tooltip on hover)
    <IconButton
    aria-label="Close dialog"
    tooltip={null}
    >
    <CloseIcon />
    </IconButton>
    
    // With custom styling
    <IconButton
      aria-label="Edit item"
      tooltip="Edit this item"
      className="custom-button"
      size="small"
      color="primary"
    >
      <EditIcon />
    </IconButton>
    
    // With disabled state
    <IconButton
      aria-label="Save document"
      disabled={true}
      tooltip="Not available"
    >
      <SaveIcon />
    </IconButton>
    Copy

    See

    https://mui.com/material-ui/react-button/#icon-button