Variable IconButtonConst

Type Declaration

• • (props: IconButtonPropsExtend): Element

  • Create a customized Material UI Icon Button component.

    Parameters

    • props: IconButtonPropsExtend

      The properties passed to the Icon Button element

    Returns Element

    The Icon Button component

    Component

    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